Kutu modeli nedir?

CSS kursu · Başlangıç · Ders 26/82

Her HTML öğesinin bir kutu olduğunu ve katmanlarını öğrenirsin.

Kutu modeli nedir?

HTML'deki her öğe bir kutu olarak çizilir. Kutu modeli (box model) bu kutunun içten dışa doğru dört katmanını tanımlar: içerik (content), iç boşluk (padding), kenarlık (border) ve dış boşluk (margin).

Tarayıcı her katmanı ayrı hesaplar. İçerik metin veya görselin durduğu yerdir; padding içerikle kenarlık arasındaki nefes alma alanıdır; border kutunun çizgisidir; margin ise komşu kutularla olan mesafedir.

Dört katmanı ayırt etmek

İçerik alanı width ve height ile belirlenir; burası metnin durduğu yerdir. padding içeriği kenarlıktan ayıran boşluktur; arka plan rengini alır ama içerik gibi davranmaz.

border kutunun çerçevesidir; kalınlığı ve rengi ayrı ayrı ayarlanır. margin ise saydamdır, arka planı yoktur ve komşu kutuları itmek için kullanılır. Margin negatif olabilir; padding negatif olamaz.

Uygulama Kutuyu görünür yap

.box seçicisi için bir bildirim bloğu yaz. İçine border ve padding bildirimi ekle ki kutu modeli görsel olarak görünsün. Örneğin border: 2px solid #444; ve padding: 16px;.

Örnek çözümü göster

.box {
  border: 2px solid #444;
  padding: 16px;
}

Kendini test et

Kutu modelinde en içteki katman hangisidir?
- padding
- margin
- content
- border
Cevabı göster

content — Doğru. İçerik en içte yer alır; sonra padding, border ve margin dışa doğru sıralanır.
Katmanı rolüyle eşleştir

content

Metin ve görselin durduğu yer
padding

İçerikle kenarlık arasındaki boşluk
border

Kutunun çerçevesi
margin

Komşu kutuları iten boşluk

İçerik yüksekliğini ayarla

.box {
  width: 200px;
  ____: 100px;
}

Cevabı göster

.box {
  width: 200px;
  height: 100px;
}

Kutu modeli nedir?