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

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla