Stil kenar boşluğu Özellik
Örnek
Bir <div> öğesinin dört kenar boşluğunu da ayarlayın:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Tanım ve Kullanım
Marj özelliği, bir öğenin kenar boşluklarını ayarlar veya döndürür.
Bu özellik bir ile dört arasında değer alabilir:
- Bir değer, örneğin: div {margin: 50px} - dört marjın tümü 50px olacaktır
- İki değer, örneğin: div {margin: 50px 10px} - üst ve alt kenar boşlukları 50 piksel, sol ve sağ kenar boşlukları 10 piksel olacaktır
- Üç değer, örneğin: div {margin: 50px 10px 20px}- üst kenar boşluğu 50px, sol ve sağ kenar boşluğu 10px, alt kenar boşluğu 20px olacaktır
- Dört değer, örneğin: div {margin: 50px 10px 20px 30px} - üst kenar boşluğu 50px, sağ kenar boşluğu 10px, alt kenar boşluğu 20px, sol kenar boşluğu 30px olacaktır
Hem margin özelliği hem de padding özelliği, bir öğenin etrafına boşluk ekler. Ancak fark, kenar boşluğunun sınırın etrafındaki boşluğu eklemesi, dolgunun ise boşluğu bir öğenin sınırının içine eklemesidir.
Tarayıcı Desteği
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
Kenar boşluğu özelliğini döndürün:
object.style.margin
Kenar boşluğu özelliğini ayarlayın:
object.style.margin = "%|length|auto|initial|inherit"
Mülk değerleri
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Teknik detaylar
| Varsayılan değer: | 0 |
|---|---|
| Geri dönüş değeri: | Bir elemanın kenar boşluklarını temsil eden bir String |
| CSS Sürümü | CSS1 |
Daha fazla örnek
Örnek
Bir <div> öğesinin dört kenar boşluğunu da "25px" olarak değiştirin:
document.getElementById("myDiv").style.margin = "25px";
Örnek
Bir <div> öğesinin kenar boşluklarını döndürün:
alert(document.getElementById("myDiv").style.margin);
Örnek
margin özelliği ile padding özelliği arasındaki fark:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
İlgili Sayfalar
CSS eğitimi: CSS Marjı
CSS referansı: kenar boşluğu özelliği
❮ Stil Nesnesi