CSS marjı Özellik
Örnek
Bir <p> öğesinin dört tarafı için kenar boşluğunu 35 piksele ayarlayın:
p {
margin: 35px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik margin
, bir öğenin kenar boşluklarını ayarlar ve aşağıdaki özellikler için kestirme bir özelliktir:
margin özelliğinin dört değeri varsa:
- kenar boşluğu: 10px 5px 15px 20px;
- üst kenar boşluğu 10 pikseldir
- sağ kenar boşluğu 5 pikseldir
- alt kenar boşluğu 15 piksel
- sol kenar boşluğu 20 piksel
margin özelliğinin üç değeri varsa:
- kenar boşluğu: 10 piksel 5 piksel 15 piksel;
- üst kenar boşluğu 10 pikseldir
- sağ ve sol kenar boşlukları 5 pikseldir
- alt kenar boşluğu 15 piksel
margin özelliğinin iki değeri varsa:
- kenar boşluğu: 10 piksel 5 piksel;
- üst ve alt kenar boşlukları 10 pikseldir
- sağ ve sol kenar boşlukları 5 pikseldir
margin özelliğinin bir değeri varsa:
- kenar boşluğu: 10 piksel;
- dört kenar boşluğunun tümü 10 pikseldir
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.margin="100px 50px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS Sözdizimi
margin: length|auto|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a 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 kenar boşluğunu üst ve alt için 35 piksele ve sağ ve sol için 70 piksele ayarlayın:
p {
margin: 35px 70px;
}
Örnek
<p> öğesinin kenar boşluğunu üst için 35 piksel, sağ ve sol için 70 piksel ve alt için 50 piksel olarak ayarlayın:
p {
margin: 35px 70px 50px;
}
Örnek
<p> öğesinin kenar boşluğunu üst için 35 piksel, sağ için 70 piksel, alt için 50 piksel ve sol için 90 piksele ayarlayın:
p {
margin: 35px 70px 50px 90px;
}
İlgili Sayfalar
CSS eğitimi: CSS Marjı
CSS eğitimi: CSS Kutu Modeli
HTML DOM referansı: kenar boşluğu özelliği