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

Sıradaki ders: Proje sonu - İlk sayfam

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler