Padding
İç boşluk olan padding'i öğrenirsin.
padding nedir?
padding içerikle kenarlık arasındaki iç boşluktur. İçeriği çerçeveden biraz uzak tutar; okunabilirliği artırır. padding kutunun arka plan rengini alır, yani renkli bir katta görünür.
Dört kenar ayrı ayrı ayarlanabilir: padding-top, padding-right, padding-bottom, padding-left. Padding negatif olamaz; sıfır veya pozitif değer alır.
padding shorthand
Dört kenarı tek tek yazmak yerine padding shorthand ile kısaca belirtebilirsin. Tek değer her kenara aynı boşluğu uygular: padding: 12px.
İki değer önce dikey, sonra yatay demektir: padding: 12px 24px (üst-alt 12, sol-sağ 24). Dört değer saat yönünde okunur: üst, sağ, alt, sol: padding: 8px 16px 12px 16px.
Uygulama padding shorthand ile dört kenar
.notice seçicisi için padding shorthand kullanarak dört kenarı ayarla: üst 8px, sağ 16px, alt 8px, sol 16px. Yani padding: 8px 16px 8px 16px.
Örnek çözümü göster
.notice {
padding: 8px 16px 8px 16px;
}Kendini test et
-
Saat yönünde dört değer
.box { padding: ____; }Cevabı göster
.box { padding: 8px 16px 12px 16px; } -
padding: 12px 24px ne demektir?
- Üst-sol, alt-sağ
- Yalnız sol ve sağ
- Sol-sağ, sonra üst-alt
- Üst-alt, sonra sol-sağ
Cevabı göster
Üst-alt, sonra sol-sağ — Doğru. İki değer önce dikey (üst-alt), sonra yatay (sol-sağ) kenarları ayarlar.
-
Değer sayısını anlamıyle eşleştir
- 1 değer
- Her kenara aynı boşluk
- 2 değer
- Üst-alt ve sol-sağ
- 3 değer
- Üst, sol-sağ, alt
- 4 değer
- Üst, sağ, alt, sol