Bir HTML dökümanı içinde, her etiket bir dikdörtgen kutu olarak kabul edilir. Bu kutuların özelliklerini (genişlik,yüksekli renk vb.) yorumlamak tarayıcı motorlarının görevidir.
CSS ile tüm kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanmaktadır. Box model tanımlaması her bir etiketin ekranda ne kadar yer kaplayacağını ifade etmektedir. Her bir kutunun genişlik/yükseklik, iç boşluk(padding), kenarlık (border) ve dış boşluk (margin) değerleri etiketin toplam kaplayacağı alanı ifade etmektedir.
Content(İçerik Alanı): etiketin içeriğinin kapladığı alanı ifade eder. Yazı, resim gibi değerler bulunur. box-sizing özelliği varsayılan olarak ayarlıysa içerik ölçüleri, içerik genişliği ve içerik yüksekliğidir.
Padding: Çerçeve(border) ile içerik(content) arasındaki alanı ifade etmektedir. İçerği dolgu olarak genişletmektedir. İç boşluk olarak düşünebiliriz.
Border: Etiketin çerçeve alanıdır. dış boşluk ile iç boşluk arasında yer almaktadır. Border alanının ebat ölçülerinin dışında rengi de olabilir.
Margin: Border alanını dış kısma doğru genişletmektedir. Etiketin dış boşlu olarak düşünülebilir. Margin alanı komşu etiketle mevcut etiket arasında boşluk bırakmak için kullanılır.
Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS’in line-height özelliğidir.
Box-sizing özelliği ile kutu modelindeki margin, padding, border yada bunların çeşitli eşleşmelerini kutu modelinin toplam alanına dahil etmek mümkündür.
KAYNAK
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
https://css-tricks.com/the-css-box-model/
