Takip Edin

CSS

CSS’te Kenar Boşluğu (margin) Özelliği

CSS margin özelliği, elemanların etrafında boşluk oluşturmak için kullanılır. CSS ile bir elemanın her bir kenarı üzerinden kenar boşluğu ayarlaması yapılabilir.

Bir Elemanın Her Kenarı İçin Kenar Boşluğu Ayarlama

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

özellikleri ile bir elemanın her kenarı için kenar boşluğunu ayarlayabilirsiniz.

Bütün margin özellikleri, aşağıdaki değerlere sahip olabilir:

  • auto : Kenar boşluğu, tarayıcı tarafından hesaplanır.
  • length : Bir kenar boşluğunu px, pt, cm vb. cinsinden belirtmek için kullanılır.
  • % : Kenar boşluğunu, içerdiği elemanın genişliğinin yüzdesi olarak belirtir.
  • inherit : Kenar boşluğunun üst elemandan miras alınması gerektiğini belirtir.
Not : margin özelliği, negatif değerleri de kabul etmektedir.

Kenar Boşluğu İçin Kısa Gösterim Özelliği

margin özelliği,

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

özelliklerini, kodu kısaltmak adına tek bir özellikte belirtmeyi mümkün kılar.

Eğer margin özelliği, 4 değere sahipse

margin: 10px 20px 30px 40px;

  • Üst kenar boşluğunun 10px değere sahip olduğunu,
  • Sağ kenar boşluğunun 20px değere sahip olduğunu,
  • Alt kenar boşluğunun 30px değere sahip olduğunu,
  • Sol kenar boşluğunun 40px değere sahip olduğunu belirtir.

Eğer margin özelliği, 3 değere sahipse

margin: 10px 20px 30px;

  • Üst kenar boşluğunun 10px değere sahip olduğunu,
  • Sağ ve sol kenar boşluklarının 20px değere sahip olduklarını,
  • Alt kenar boşluğunun 30px değere sahip olduğunu belirtir.

Eğer margin özelliği, 2 değere sahipse

margin: 10px 20px;

  • Üst ve alt kenar boşluklarının 10px değere sahip olduğunu,
  • Sağ ve sol kenar boşluklarının 20px değere sahip olduğunu belirtir.

Eğer margin özelliği, 1 değere sahipse

margin: 10px;

  • Tüm kenar boşluklarının 10px değere sahip olduğunu belirtir.

margin Özelliğinin auto Değeri

margin özelliğinin değerini auto yaparak elemanı, kapsayıcısının içinde yatay olarak ortalayabilirsiniz. Eleman, auto değerini aldıktan sonra belirtilen genişliği alacak ve kalan boşluk, sağ ve sol kenar boşlukları arasında eşit olarak bölünecektir.

margin Özelliğinin inherit Değeri

Aşağıdaki örnekte <p> elemanı, margin-left  özelliğini üst elemanı olan <div> elemanından miras almıştır:

Devamını oku

Popüler

error: Content is protected !!