CSS “margin” Özelliği Kullanımı

Bu yazımızda, web tasarımında sıkça karşılaştığımız ve elementlerin dış boşluklarını belirlememize yardımcı olan CSS “margin” özelliği hakkında detaylı bir yazı hazırladık.

CSS “margin” Özelliği

CSS “margin” özelliği, bir öğenin dışında kalan boşlukları belirlemek için kullanılır. Bu boşluk, öğeler arasında bir aralık oluşturarak, sayfa içerisinde öğelerin birbirleriyle veya sayfa kenarlarıyla olan ilişkisini ayarlar. CSS kutu modelini incelediğinizde margin’in nasıl bir şey olduğu görülecektir:

Yukarıdaki resimden de fark edileceği üzere margin özelliği ilgili elementin border özelliğinden sonra yer alan en dıştaki boşluğunu oluşturmaktadır. Margin boşluğu için kullanılan değerler aşağıdaki gibidir:

• margin-top: value; Öğenin üst kısmında oluşacak boşluğu tanımlar.
• margin-right: value; Öğenin sağ kısmında oluşacak boşluğu belirtir.
• margin-bottom: value; Öğenin alt kısmında oluşacak boşluğu belirtir.
• margin-left: value; Öğenin sol kısmında oluşacak boşluğu tanımlar.

Değer (value) olarak genellikle piksel (px) kullanılsa da, yüzde (%), em, rem gibi birimlerle de boşluk miktarını belirleyebilirsiniz.

❗ Margin pekala negatif bir değerle de tanımlanabilir. Örneğin, margin-left:-10px şeklinde yazdığınızda, ilgili element bulunduğu yerden 10px sola doğru kayacaktır.

“margin” Özelliğinin Tek Satırda Yazımı (Margin Shorthand)

Yukarıdaki kodu incelediğimizde, margin özelliklerinin dört satırda yazıldığı görülmektedir. Bu özellikleri her seferinde ayrı ayrı yazmak yerine, CSS bize bu bilgileri margin özelliği ile tek bir satırda tanımlama olanağı sunar. Böylece CSS kodunun daha okunabilir ve sade olması sağlanır.

Saat yönünde gidecek şekilde sırasıyla üst, sol, alt ve sağ margin özelliklerine tek satırda yazılacak şekilde değerler atanabilir:

Yani margin özelliğini kullanmak, margin-top, margin-right, margin-bottom ve margin-left özelliklerini tek bir satırda birleştirir. Söz dizimi (syntax) ise şu şekilde olur ➡️ margin: [top value] [right value] [bottom value] [left value] Örneğin:

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Margin özelliklerini kullanılan yöne bağlı olarak aşağıdaki gibi yazabiliriz:

• margin: 20px;
  • her yönden 20px boyutunda margin ayarlanır.
• margin: 20px 40px 80px 100px;
  • üst (top) margin 20px boyutunda ayarlanır.
  • sağ (right) margin boyutu 40px ayarlanır.
  • sol (left) margin boyutu 80px olarak ayarlanır.
  • alt (bottom) margin 100px boyutunda ayarlanır.
• margin: 20px 40px 80px;
  • üst (top) margin 20px boyutunda ayarlanır.
  • sağ (right) ve sol (left) margin boyutları 40px ayarlanır.
  • alt (bottom) margin 80px boyutunda ayarlanır.
• margin: 20px 40px;
  • üst (top) ve alt (bottom) margin boyutları 20px olarak ayarlanır.
  • sağ (right) ve sol (left) margin boyutları 40px olarak ayarlanır.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

“margin: auto” Kullanımı

Elementi yatayda ortalamak için margin özelliğine auto değerini atayabiliriz. Fakat bu teknikten tam anlamıyla yararlanabilmek için elementin genişliğini (width) de belirtmeliyiz. Özetle syntax aşağıdaki gibi olmalıdır:

Kodumuzdaki, 0 değeri her ne kadar zorunlu olmasa da genellikle kullanılmaktadır. Burada margin: 0 auto; ifadesinin anlamı şudur:

• 0: elementin üst ve alt marjını 0 olarak ayarlar.
• auto: elementin sağ ve sol marjını otomatik olarak hesaplar, bu da elementi yatay olarak sayfa içerisinde ortalar.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Genellikle, margin: 0 auto; kullanımı, elementin üst ve alt boşluklarıyla ilgilenmemesi ve sadece yatayda ortalanması istendiğinde kullanılır. Eğer üst ve alt margin değerlerini de belirtmek isterseniz, bu değerleri 0 yerine diğer değerlerle değiştirebilirsiniz. Özetle margin: 0 auto; kullanırken aşağıdaki durumlarda dikkat edilmesi gerekir

1. Kutunun Genişliği: margin: auto; kullanılırken, öğenin bir genişliğinin olması gerekir. Eğer öğe genişliği belirtilmemişse veya genişliği %100 ise, bu teknik çalışmaz.
2. Kutu Modeli: box-sizing özelliği, öğenin toplam genişliğini ve yüksekliğini etkileyebilir, bu nedenle dikkatli olunmalıdır.
3. Dikey Merkezleme: margin: auto; dikey merkezleme için doğrudan kullanılamaz. Dikey merkezleme için genellikle Flexbox veya Grid gibi diğer CSS özellikleri kullanılır.
4. Ebeveyn Öğe: margin: auto; kullanılırken, ebeveyn öğenin genişliğinin belirli bir değere sahip olması gerekmektedir. Eğer ebeveyn öğe tam ekran genişliğinde ise, bu teknik beklenildiği gibi çalışmayabilir.
5. Eski Tarayıcılar: Bu teknik, eski web tarayıcıları tarafından tam olarak desteklenmeyebilir. Bu nedenle uyumluluk için tarayıcı desteğini kontrol etmekte fayda var.

Display Değerlerde “margin” Özelliği Kullanımı

CSS’de margin özelliği, bir elementin dış boşluğunu (yani, elementin ve komşu elementler arasındaki boşluğu) belirtmek için kullanıldığını söyledik. Ancak eleman türüne, yani display değerine göre margin’in nasıl çalıştığı değişkenlik gösterebilir. Çalışmalarımızda bunu bilmek önemlidir. Madeler halinde sıralayalım:

1. Block-level elements (Blok seviye elementleri): Malumunuz, div, p, h1–h6, ul, li gibi elementler blok seviye elementlerdir ve bu elementlerde margin özelliği hem yatayda (sağ ve sol) hem de dikeyde (üst ve alt) etkilidir. Bu elementler varsayılan olarak genişliklerini ebeveynlerinin tam genişliğine ayarlarlar. margin ile bu genişlik ayarlanabilir veya yatayda ortalama yapmak için auto değeri kullanılabilir.
2. Inline-level elements (Satır içi seviye elementleri): span, a, img, button gibi elementler satır içi seviye elementlerdir. Bu elementlerde margin özelliği sadece yatayda (sağ ve sol) etkilidir. Üst ve alt margin değerleri bu elementler için etkisizdir.
3. Inline-block elements: inline-block, satır içi seviye elementlerine blok seviye özellikleri kazandırmak için kullanılır. Bu nedenle, inline-block olarak ayarlanmış bir element, hem yatayda hem de dikeyde margin değerlerine tepki verir.

Özetle, margin özelliği tüm HTML elementlerinde kullanılabilir, ancak bu özelliğin etkisi elementin display özelliğine bağlı olarak değişkenlik gösterir. Elementin tipini veya display değerini bilmeden margin kullanırsanız, beklenmedik sonuçlarla karşılaşabilirsiniz. Bu nedenle, margin uygulamadan önce elementin türünü göz önünde bulundurmanız önerilir. Ayrıca margin çökmesi olarak bilinen “margin collapsing” durumuna da dikkat etmek gerekir.