css-kutu-model-css-box-model

Tüm HTML öğeleri kutu olarak kabul edilebilir. CSS'de, "kutu modeli" terimi tasarım ve düzen hakkında konuşurken kullanılır.
Content - Metin ve resimlerin bulunduğu kutunun içeriği
Padding - İçeriğin etrafındaki bir alanı siler. Dolgu şeffaf
Border - Dolgu ve içeriğin etrafında dolanan bir kenarlık
Margin - Sınırın dışındaki bir alanı temizler. Kenar şeffaf
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Önemli: CSS ile bir öğenin genişlik ve yükseklik özelliklerini ayarlarsanız, içerik alanının genişliğini ve yüksekliğini ayarlamış olursunuz . Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemeniz gerekir.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
İşte hesaplama:
320px (genişlik)
+ 20px (sol + sağ dolgu)
+ 10px (sol + sağ kenarlık)
+ 0px (sol + sağ kenar boşluğu)
= 350px