Bu yazımızda Css’te Box Model ( kutu modeli ) kavramını öğreneceğiz. Html etiketleri vermiş olduğumuz genişlik, yükseklik, padding, border ve margin değerleri ile belirli bir alan kaplarlar ve bu kapladıkları alanlar göz önünde bulundurularak sayfaya yerleşimleri sağlanır.
İşte her bir etiketin bu değerler ile birlikte oluşturduğu alana kutu, sayfaya yerleştirilmelerine ise kutu modeli diyebiliriz.
Resim üzerinde gösterecek olursak kutu modeli şu şekildedir.
► İçerik – Html etiketinin içeriği.
► Padding – İçerik ile border arasındaki iç boşluk.
► Border – Html etiketine vermiş olduğumuz kenarlık.
► Margin – Kenarlık değerinden sonra gelen dış boşluk.
Bir Html etiketine genişlik ve yükseklik değeri verdiğimizde, bu değer sadece etiketin içeriğinin bulunduğu kısma verilen değerdir. Html etiketleri sayfaya yerleşirken sadece bu değerler göz önünde bulundurularak yerleşmez. Genişlik ve yükseklik değerlerinin yanında padding, border ve margin değerlerinin de hesaplanması gerekir.
Şöyle bir örnek yapalım.
Html sayfamıza 200px genişliği ve 200px yüksekliği olan bir resim ekleyelim.
Bunun altına ise bir div etiketi oluşturalım ve genişlik, yükseklik, padding, border değerleri verelim. Verilen değerler ile resmi incelediğinizde Html etiketlerinin sayfaya hangi değerleri hesaplayarak yerleştirildiğini daha iyi anlayacaksınızdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { width: 100px; height: 80px; padding: 35px; border: 15px solid blue; } </style> </head> <body> <img src="image.jpg" width="200" height="200"/> <div> width 100px <br /> height 80px <br /> padding 35px <br /> border 15px <br /> </div> </body> </html> |
Resmin genişliği (200px) = Div’in kapladığı alan, width (100px) + border-right (15px) + border-left (15px) + padding-right (35px) + padding-left (35px)
Gördüğünüz gibi bir etiketin toplam genişliği,
Toplam Genişlik = width + border-right + border-left + padding-right + padding-left + margin-right + margin-left
Toplam yüksekliği ise,
Toplam Yükseklik = height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom
şekilde hesaplanır.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
){kind=link}