İç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.