CSS Dersleri 8 - Margin Kullanımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Margin konusunu öğreneceğiz.

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-top: 50px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

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

p {
  margin: 25px 50px;
}

p {
  margin: 25px;
}

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