CSS

CSS Kenar Boşluğu (Margin) Özelliği Ayarlama

CSS’ te margin özelliği öğelerin etrafında boşluk oluşturmak için kullanılır. Saygfa içinde kullanılan öğenin her bir kenarı için (üst, alt, sağ, sol) kenar boşluğu ayarlanabilir.

CSS ile üst, alt, sağ ve sol kenar boşluklarını ayarlamak için aşağıdaki özellikler kullanılır.

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

Yukarıdaki kenar boşluğu bırakmak için kullanılacak özellikler aşağıdaki değerleri alabilir.

  • auto – Bırakılacak kenar boşluğunu browser ayarlar.
  • length – kenar boşluğunu px, pt, cm, vs. olarak belirtir. Ör: 20px
  • % – Kapsayıcı öğeningenişliğinin % değeri olarak kenar boşluğu bırakır.
  • inherit – Kenar boşluğunun üst öğe (parent) miras alması gerektiğini belirtir.

Örnek:

 

Kenar boşluklarını yukarıdaki gibi ayrı ayrı yazmak yerine aşağıdaki gibi kısaltılmış bir yazım mümkündür.

Yukarıdaki CSS kodu ile  üst kenar boşluğu 25px, sağ kenar boşluğu 50px, alt kenar boşluğu 75px ve sol kenar boşluğu için 100px olarak ayarlanmıştır.

 

margin özelliği 3 (üç) değere sahipse;

margin: 25px 50px 75px;

  • üst margin is 25px
  • sağ and sol margin 50px
  • alt margin 75px olarak ayarlanır.

margin özelliği 2 (iki) değere sahipse;

margin: 25px 50px;

  • üst ve alt margin 25px
  • sol ve sağ margin 50px olarak ayarlanır.

margin özelliği tek değere sahipse;

margin: 25px;

  • Tüm kenar boşlukları 25px olarak ayarlanır.

CSS “margin:auto” Kullanımı

Bir öğeyi kapsayıcısında yatay olarak ortalamak için kenar boşluğunu auto olarak ayarlayabilirsiniz.

Öğe belirtilen genişliği alacak ve daha sonra  kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir.

Örnek:

 

CSS “margin : inherit” Kullanımı

Aşağıdaki örnekte p öğesinin sol kenar boşluğu ana öğeden (kapsayıcı – div) miras alınmıştır. (50px)

Örnek:

Yorum bırak