Style margin özelliği

Tanım ve Kullanım

margin Özellik, elementin dış kenar boşluğunu ayarlar veya döndürür.

Bu özellik bir ila dört değeri kullanabilir:

  • Bir değer, örneğin: div {margin: 50px} - Dört dış kenar boşluğu tümü 50px
  • İki değer, örneğin: div {margin: 50px 10px} - Üst ve alt dış kenar boşluğu 50px, sol ve sağ dış kenar boşluğu 10px
  • Üç değer, örneğin: div {margin: 50px 10px 20px} - Üst dış kenar boşluğu 50px, sol ve sağ dış kenar boşluğu 10px, alt dış kenar boşluğu 20px
  • Dört değer, örneğin: div {margin: 50px 10px 20px 30px} - üst dış boşluğu 50px, sağ dış boşluğu 10px, alt dış boşluğu 20px, sol dış boşluğu 30px olur}}

margin özelliği ve padding özelliği, elementin etrafına boşluk ekler. Ancak, farkları şunlardır: margin, kenarlık etrafına boşluk eklerken, padding, elementin kenarlığı içindeki boşluğu ekler.

Ayrıca bakınız:

CSS dersleri:CSS dış kenar boşluğu

CSS referans el kitabı:margin özelliği

Örnek

Örnek 1

Dive elementinin dört dış boşluğunu ayarlar:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Kişisel olarak deneyin

Örnek 2

Dive elementinin dört dış boşluğunu "25px" olarak değiştirir:

document.getElementById("myDiv").style.margin = "25px";

Kişisel olarak deneyin

Örnek 3

Dive elementinin dış boşluğunu döndürür:

alert(document.getElementById("myDiv").style.margin);

Kişisel olarak deneyin

Örnek 4

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";
}

Kişisel olarak deneyin

Sözdizimi

margin özelliğini döndürün:

object.style.margin

margin özelliğini ayarlayın:

object.style.margin = "%|length|auto|initial|inherit"

Özellik değeri

Değer Açıklama
% Dış boşluğu ebeveyn elemanın genişliğinin yüzdesi olarak tanımlar.
length Uzunluk birimi ile dış boşluğu tanımlar.
auto Tarayıcı, dış boşlukları (dört dış boşluk eşit olacak şekilde) ayarlar.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit Bu özelliği ebeveyn elemanından miras alır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: 0
Dönüş değeri: Dizgi, elemanın dış boşluğunu ifade eder.
CSS sürümü: CSS1

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek