CSS Ders 3: CSS Kutu Modeli

CSS Kutu Modeli

CSS kutu modeli, her HTML elemanının bir kutu olarak düşünülmesini sağlar. Bu model dört ana bileşenden oluşur:

• Content: İçerik kutusu, metin ve resim gibi içeriği içerir.
• Padding: İçerik ile kenarlık arasındaki boşluktur.
• Border: Kenarlık, içerik ve dolgu kutusunu çevreler.
• Margin: Kenarlık ile çevredeki diğer elemanlar arasındaki boşluktur.

div {
  width: 300px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}

Box-Sizing Özelliği

box-sizing özelliği, kutu modelinin nasıl hesaplanacağını belirler.

div {
  box-sizing: border-box;
}