Margin
Dış boşluk olan margin'i öğrenirsin.
margin nedir?
margin kutunun dış boşluğudur; komşu kutuları iterek araya mesafe koyar. padding'in aksine saydamdır, arka planı yoktur ve negatif olabilir. İki kutuyu çakıştırmak için margin: -10px yazmak işe yarar.
padding gibi dört kenar ayrı ayarlanır: margin-top, margin-right, margin-bottom, margin-left. Aynı kısaltma biçimi geçerlidir: tek, iki veya dört değer.
margin collapse
İki blok öğe dikey olarak üst üste gelirse, margin-bottom ve margin-top üst üste binmez; büyük olan geçer. Buna margin collapse denir.
Örneğin bir paragrafın margin-bottom: 20px, altındaki paragrafın margin-top: 30px değeri varsa, aralarındaki boşluk 50 piksel değil 30 piksel olur. Yatay margin'ler collapse olmaz; bu yalnızca dikeydir.
Uygulama Kapsayıcıyı yatayda ortala
.page seçicisi için yatayda ortalanmış bir kapsayıcı yaz: margin: 0 auto kullan. Üst-alt margin sıfır, sol-sağ otomatik olsun.
Örnek çözümü göster
.page {
margin: 0 auto;
}Kendini test et
-
margin ile padding arasındaki temel fark nedir?
- margin komşu kutuları iter, padding içerikle kenarlığı ayırır
- padding saydamdır, margin arka planı alır
- padding negatif olabilir, margin olamaz
- İkisi de tamamen aynı şeydir
Cevabı göster
margin komşu kutuları iter, padding içerikle kenarlığı ayırır — Doğru. padding içerik-kenarlık arasıdır; margin komşu kutulara olan mesafedir.
-
margin collapse hesabı
/* p { margin-bottom: 16px; } sonraki p { margin-top: 24px; } */ /* aralarındaki boşluk = ____px olur */Cevabı göster
/* p { margin-bottom: 16px; } sonraki p { margin-top: 24px; } */ /* aralarındaki boşluk = 24px olur */ -
margin kullanımını eşleştir
- margin
- Komşu kutuları iter
- padding
- İçerikle kenarlığı ayırır
- margin: 0 auto
- Kutuyu yatayda ortalar
- margin: -10px
- Komşu kutuyla çakıştırır
-
İki paragraf dikey olarak yan yana gelince ne olur?
- Margin collapse yalnızca yatayda olur
- Margin collapse padding için de geçerlidir
- Dikey boşluk, iki margin'in büyük olanı kadar olur
- Dikey boşluk, iki margin'in toplamı kadar olur
Cevabı göster
Dikey boşluk, iki margin'in büyük olanı kadar olur — Doğru. Dikey margin'ler toplanmaz; büyük olan kazanır.