CSS Margin Kullanımı

CSS margin özelliği, tanımlanmış sınırların dışında, etiketlerin etrafında boşluk oluşturmak için kullanılır. CSS margin ile etiketlerin kenarların dış boşluklarını düzenleyebilirsiniz. Etikete ait kenarları tek bir seferde düzenleyebileceğiniz gibi tek tek düzenlemekte mümkündür.

CSS, bir etiketin tüm kenarları için "margin" özelliği sunmaktadır :

• margin-top
• margin-left
• margin-right
• margin-bottom

Bu CSS özelliklerinin alabileceği değerleri şunlardır : 

• auto - tarayıcı otomatik hesaplar
• uzunluk : px, pt, cm gibi ölçüler
• % - yüzdelik dilim olarak ifade edilebilir
• inherit - margin özelliğini üst etiketten miras alır

CSS Margin Örneği :

p {
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

# CSS Margin Kısa Kullanımı

CSS margin özelliğininde kısa kullanımları mevcuttur.

p {
  margin: 25px 50px 75px 55px;
}

Syntax şu şekildedir.

margin: { üstten aşağı, sağdal sola, aşağıdan yukarıya, sağdan sola; }

# CSS Margin Auto Özelliği

CSS'de bir etiketi üst etiketine göre ortalamak istediğimizde margin:auto ifadesini kullanabiliriz. Bunun için etikete bir genişlik verilmesi gerekir, daha sonra belirtilen genişliği kaplar ve kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünür.

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}