CSS kenar boşluğu Üstü Özellik
Örnek
<p> öğesinin üst kenar boşluğunu 25 piksele ayarlayın:
p.ex1 {
margin-top: 25px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik margin-top
, bir öğenin üst 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.marginTop="100px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS Sözdizimi
margin-top: length|auto|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
length | Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units | |
% | Specifies a top margin in percent of the width of the containing element | |
auto | The browser calculates a top 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
Bir <p> öğesinin üst kenar boşluğunu kapsayıcı genişliğinin %10'una ayarlayın:
p.ex1 {
margin-top: 10%;
}
Örnek
<p> öğesinin üst kenar boşluğunu 2 em olarak ayarlayın:
p.ex1 {
margin-top: 2em;
}
İlgili Sayfalar
CSS eğitimi: CSS Marjı
HTML DOM referansı: marginTop özelliği