Boşluk ve hizalama
margin ve padding ile boşluk ekler, hizalama yaparsın.
Boşluk ve hizalama
Bu derste paragrafların dış boşluk, iç boşluk ve hizalamasını ayarlayacaksın. margin öge sınırının dışındaki boşluğu, padding ise sınırın içindeki boşluğu belirler. text-align metni yatayda hizalar.
İki değerli kısa yazım yaygındır: margin: 12px 0 dikey ve yatay boşlukları ayrı ayrı verir. text-align: left metni sola, center ortaya, right sağa yaslar. Bu üç özellik sayfayı nefes alan ve düzenli bir hale getirir.
Kutu modeli: margin ve padding farkı
Her HTML ögesi bir kutu olarak düşünülür. margin kutunun dışındaki boşluğu, padding ise içeriğiyle sınırı arasındaki boşluğu yönetir. İkisi de sayfanın nefes almasını sağlar ama farklı yerlerde çalışır.
Örnek: p { margin: 12px 0; padding: 0 16px; }. Bu bölüm paragrafların üst ve altında 12 piksel boşluk bırakır, sağ ve solunda ise iç boşluk verir. Sonuç: paragraflar birbirine yapışmaz ve satır kenarlarına değmez.
Uygulama p bölümünü ekle
Önceki dersin dosyasını al (başlık yorumu + body ve h1 bölümleri). Altına bir p tür seçici bölümü ekle ve içine şu bildirimleri yaz: margin: 12px 0, padding: 0 16px, text-align: left. Her bildirimin sonunda noktalı virgül olsun.
Örnek çözümü göster
/* Kişisel Site stil sayfası */
body {
margin: 0;
}
h1 {
color: #2a3d66;
font-family: Georgia, serif;
font-size: 2rem;
}
p {
margin: 12px 0;
padding: 0 16px;
text-align: left;
}Kendini test et
-
body { margin: 0; } ne yapar?
body { margin: 0; }- Arka plan rengini değiştirir
- Yazı tipini belirler
- Metni ortaya hizalar
- Tarayıcının varsayılan kenar boşluğunu sıfırlar
Cevabı göster
Tarayıcının varsayılan kenar boşluğunu sıfırlar — Doğru. margin: 0 body'nin varsayılan dış boşluğunu kaldırır; içerik tarayıcı kenarına kadar uzanır.
-
Paragraf hizalamasını tamamla
p { text-align: ____; }Cevabı göster
p { text-align: left; } -
Özellikleri anlamlarıyla eşleştir
- margin
- dış boşluk
- padding
- iç boşluk
- text-align
- yatay hizalama
- color
- metin rengi