Css Box Model (Kutu Modeli)

Merhaba Arkadaşlar,
Bu makalede 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.

css-dersleri-box-model-kutu-modeli-0

       ► İç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.

css-dersleri-box-model-kutu-modeli-1

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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 15 – Position Kullanımı

Sonraki : Css Dersleri 17 – Z-index Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +