CSS Kenar Boşluğu (Margin)

CSS Kenar Boşluğu (Margin)

Kenar boşlukları, tanımlanmış sınırların dışında, öğelerin etrafında boşluk oluşturmak için kullanılır.

CSS ile kenar boşlukları üzerinde tam kontrole sahip olabilirsiniz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) kenar boşluğunu ayarlayabilirsiniz.

Kenar Boşlukları - Özel Kenar Ayarlama

CSS, bir öğenin her bir tarafı için kenar boşluğunu belirtmek için özelliklere sahiptir.

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

Tüm kenar boşluğu özellikleri aşağıdaki değerlere sahip olabilir:

• auto - tarayıcının belirlediği kenar boşluğunu kullanır.
• length - px, pt, cm, vb. cinsinden bir kenar boşluğu belirtir.
• % - içeren öğenin genişliğinin %'si olarak bir kenar boşluğu belirtir.
• inherit - kenar boşluğunun üst öğeden devralınması gerektiğini belirtir.

İpucu: Negatif değerlere izin verilir.

Örnek:

Bu örnekte, bir

öğesinin dört tarafı için farklı kenar boşlukları ayarlanmaktadır.

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

Kenar Boşlukları - Steno Özelliği

Kodu kısaltmak için tüm kenar boşluğu özelliklerini tek bir özellikte belirtmek mümkündür.

Kenar boşluğu özelliği, aşağıdaki bireysel kenar boşluğu özellikleri için bir kestirme özelliktir:

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

Eğer kenar boşluğu özelliğinin dört değeri varsa:

• margin: 25px 50px 75px 100px;
• top margin: 25px (Üst)
• right margin: 50px (Sağ)
• bottom margin: 75px (Alt)
• left margin: 100px (Sol)

Eğer kenar boşluğu özelliğinin üç değeri varsa:

• margin: 25px 50px 75px;
• top margin: 25px (Üst)
• right and left margins: 50px (Sağ ve Sol)
• bottom margin: 75px (Alt)

Eğer kenar boşluğu özelliğinin iki değeri varsa:

• margin: 25px 50px;
• top and bottom margins: 25px (Üst ve Alt)
• right and left margins: 50px (Sağ ve Sol) 

Eğer kenar boşluğu özelliğinin bir değeri varsa:

• margin: 25px;
• all four margins 25px (Tüm kenar boşlukları)

Örnek:

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

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

p {
  margin: 25px 50px;
}

p {
  margin: 25px;
}

Kenar Boşlukları - Otomatik Değer Atama

Öğeyi kapsayıcı içinde yatay olarak ortalamak için kenar boşluğu özelliğini otomatik olarak ayarlayabilirsiniz.

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

Örnek:

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

Kenar Boşlukları - Devralınan Değer

Bu örnek,

öğesinin sol kenar boşluğunun üst öğeden (

Örnek:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Kenar Boşluğu - Daraltma

Öğelerin üst ve alt kenar boşlukları, bazen iki kenar boşluğunun en büyüğüne eşit olan tek bir kenar boşluğuna daraltılır.

Bu özellik, sol ve sağ kenar boşluklarında kullanılmaz. Sadece üst ve alt kenar boşluklarda kullanılabilir.

Örnek:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

Yukarıdaki örnekte, <h1> öğesinin alt kenar boşluğu 50 piksel ve <h2> öğesinin üst kenar boşluğu 20 piksel olarak ayarlanmıştır.

<h1> ve <h2> arasındaki dikey kenar boşluğunun toplam 70 piksel (50 piksel + 20 piksel) olacağı görülmektedir. Ancak, kenar boşluğunun daralması nedeniyle, gerçek kenar boşluğu 50 piksel olur.

Tüm CSS Kenar Boşluğu Özellikleri