İçerik kutusu

Kutu modeli ile içerik kutusunu biçimlendirirsin.

Genişlik ve kutu boyutu: width, box-sizing

Yazı kartlarının ekranı kaplamasını istemeyiz; genişliğini sınırlamak için width özelliğini kullanırız. Ancak padding eklediğimizde tarayıcı, padding'i width'in üzerine ekler; bu da kutunun planladığımızdan büyümesine yol açar.

Bunu önlemek için box-sizing: border-box yazarız. Böylece padding ve kenarlık, width'in içinde sayılır; kutu belirttiğimiz genişlikte kalır.

İç ve dış boşluk: padding, margin

padding, içeriğin kenarına kadar olan iç boşluğu; margin ise ögenin komşularıyla arasındaki dış boşluğu belirler. İkisi de dört kenar için ayrı ya da kısayolla yazılabilir.

Yazı kartımızda içeriği kenardan uzak tutmak için padding, kartlar arasına nefes almak için margin kullanırız:

padding: 24px;
margin: 16px auto;

auto değeri sağ-sol boşluğu eşit paylaştırır; kartı yatayda ortalar.

Kısayol: dört değeri tek satırda

Hem padding hem margin için dört kenarı tek bildirimde yazabiliriz. Tek değer dört kenara, iki değer üst-alt ve sol-sağ, dört değer ise sırayla üst-sağ-alt-sol uygulanır.

margin: 16px auto yazınca üst-alt 16px, sol-sağ ise auto olur. Bu, kartı yatayda ortalamak için kullanışlı bir kalıptır.

Uygulama Yazı kartı bölümünü ekle

Önceki dersin body bölümünü içeren dosyayı al. Altına bir .post bölümü ekle ve içine dört bildirim yaz: width: 640px, padding: 24px, margin: 16px auto ve box-sizing: border-box. Her bildirim noktalı virgülle kapanmalı; body bölümünü silme.

Örnek çözümü göster

/* Gezi Günlüğü stil sayfası */

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.post {
  width: 640px;
  padding: 24px;
  margin: 16px auto;
  box-sizing: border-box;
}

Kendini test et

Hangisi bir ögenin genişliğini belirten özelliktir?
- font-size
- color
- width
- padding
Cevabı göster

width — Doğru. width özelliği ögenin yatay genişliğini belirler.
padding değerini tamamla
```
padding: ____;
```
Cevabı göster
```
padding: 24px;
```
Özellikleri örnek değerleriyle eşleştir

width

640px
padding

24px
margin

16px auto
box-sizing

border-box
Kartı yatayda ortalamak için margin kısayolu ne olmalı?
- margin: 0;
- margin: 24px;
- margin: auto 0;
- margin: 16px auto;
Cevabı göster

margin: 16px auto; — Doğru. '16px auto' üst-alt 16px, sol-sağ auto yapar ve kartı yatayda ortalar.

Sıradaki ders: Renk ve arka plan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler