CSS Marjı Daraltma
Bazen iki kenar boşluğu tek bir kenar boşluğuna çöker.
Marj Daralt
Öğelerin üst ve alt kenar boşlukları bazen iki kenar boşluğunun en büyüğüne eşit olan tek bir kenar boşluğuna daraltılır.
Bu, sol ve sağ kenar boşluklarında olmaz! Sadece üst ve alt kenar boşlukları!
Aşağıdaki örneğe bakın:
Örnek
Marj çöküşünün gösterilmesi:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Yukarıdaki örnekte, <h1> öğesinin alt kenar boşluğu 50 piksel ve <h2> öğesinin üst kenar boşluğu 20 piksel olarak ayarlanmıştır.
Sağduyu, <h1> ve <h2> arasındaki dikey kenar boşluğunun toplam 70 piksel (50 piksel + 20 piksel) olacağını öneriyor gibi görünüyor. Ancak, marjın çökmesi nedeniyle, gerçek marj 50 piksel olur.
Tüm CSS Marj Özellikleri
| Property | Description |
|---|---|
| margin | A shorthand property for setting the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |