CSS kenar boşluğu-alt Özellik
Örnek
<p> öğesinin alt kenar boşluğunu 25 piksele ayarlayın:
p.ex1 {
margin-bottom: 25px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik margin-bottom
, bir öğenin alt kenar boşluğunu ayarlar.
Not: Negatif değerlere izin verilir.
Varsayılan değer: | 0 |
---|---|
Miras: | Hayır |
canlandırılabilir: | evet, bireysel özelliklere bakın . Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS1 |
JavaScript sözdizimi: | nesne .style.marginBottom="100px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS Sözdizimi
margin-bottom: length|auto|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
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, yatay (sol ve sağ) kenar boşluklarında olmaz! Yalnızca dikey (üst ve alt) kenar boşlukları!
Aşağıdaki örneğe bakın:
Örnek
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Yukarıdaki örnekte, <p class="a"> öğesinin üst ve alt kenar boşluğu 30 pikseldir. <p class="b"> öğesinin üst ve alt kenar boşluğu 20 pikseldir.
Bu, <p class="a"> ile <p class="b"> arasındaki dikey kenar boşluğunun 50 piksel (30 piksel + 20 piksel) olması gerektiği anlamına gelir. Ancak, marjın çökmesi nedeniyle, gerçek marj 30 piksel oluyor!
Daha fazla örnek
Örnek
<p> öğesinin alt kenar boşluğunu kapsayıcı genişliğinin %10'una ayarlayın:
p.ex1 {
margin-bottom: 10%;
}
Örnek
<p> öğesinin alt kenar boşluğunu 2 em olarak ayarlayın:
p.ex1 {
margin-bottom: 2em;
}
İlgili Sayfalar
CSS eğitimi: CSS Marjı
HTML DOM referansı: marginBottom özelliği