1. İçerik (Content) 15. Elemanın asıl içeriği, metin veya resim burada bulunur 5.
2. Dolgu (Padding) 15. İçerik ile kenarlık arasındaki boşluktur 5.
3. Kenarlık (Border) 15. İçerik ve dolgu arasında bir sınır çizgisidir 5.
4. Kenar Boşluğu (Margin) 15. Elemanın çevresindeki boşluktur ve diğer elemanlardan ne kadar uzak olacağını belirler 5.

.bilgilendirme-kutusu {
   width: 300px;
   height: 200px;
   padding: 20px;
   border: 5px solid black;
   margin: 15px;
   box-sizing: border-box;
}
Kopyala

• width

  ve

  height

  ile kutunun boyutları ayarlanır 4.

• padding

  ile içerik ile kenarlık arasındaki boşluk belirlenir 4.

• border

  ile kutunun kenarlığı stil, renk ve kalınlık ayarlanarak oluşturulur 5.

• margin

  ile kutunun etrafındaki dış boşluk ayarlanır 5.

• box-sizing: border-box

  ile genişlik ve yüksekliğin içerik, padding ve border'ı da kapsadığı belirtilir 5.

• eylemseyhan.medium.com 1;
• web.dev 2;
• tasarimkodlama.com 4.