CSS Margin Özelliği | Elementleri Yatay Ortalama

0 600

Boşluk TDK’na göre ‘boş olan yer’ olarak ifade ediliyor.Boş ise ‘üstünde hiç bir şey olmayan’ ve ‘anlamsız’ olarak tanımlanıyor.Konumuzla alakasını devamını okuyunca daha iyi anlayacaksınız.

CSS Margin Nedir?

HTML elementleri kutu modeline göre bir sayfada belirli yer işgal ederler.CSS kutu modelinde elementlerin dış boşluklarına margin denir.Diğer bir deyişle kutu modelinde elementin kenarlığının (border) dışında kalan ve elementi diğer elementlerden ayıran saydam alana margin diyoruz.CSS margin özelliği ise bu saydam dış boşluğu oluşturmak ve ayarlamak için kullanılır.

Bir elementin her yönüne (üst, alt, sağ, sol) özel margin değeri tanımlamak için CSS de 4 tane margin özelliği vardır.

  • margin-top : Üst boşluk
  • margin-right : Sağ boşluk
  • margin-bottom : Alt boşluk
  • margin-left : Sol boşluk

Bu 4 margin özelliği aşağıdaki değerlerden biri alabilir.

  • auto : Boşluk tarayıcı tarafından hesaplanır.
  • Ölçü birimleri : Boşluk değeri px,em,rem gibi CSS ölçü birimleri ile kullanılır.
  • % : İçeren elementin genişliğinin yüzdesine göre boşluk oluşturur.
  • inherit : Parent elementin margin değerini miras alır.

Örnek Kullanımı :

Fotoğraftaki her bir sandalyeyi HTML elementi olarak düşünürsek, sandalyelerin birbirlerinden ayrılmalarını sağlayan boşluğu margin değeri gerçekleştirir.

Margin – Kısaltılmış Özellik

Bütün margin özelliklerini tek bir margin özelliği içinde kullanmaya yarar.Aşağıda sıraladığım 4 margin özelliğini aslında sadece margin kısaltılmış özelliği ile oluşturabiliriz.

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

Örnek Kullanım :

Bu özellik nasıl çalışır?

Eğer margin özelliği 4 değer almış ise:

  • İlk değer(20px) top margin değeridir.Yani margin-top: 20px; değerini temsil eder.
  • İkinci değer(30px) right margin değeridir.Yani margin-right: 30px; değerini temsil eder.
  • Üçüncü değer(40px) bottom margin değeridir.Yani margin-bottom :40px; değerini temsil eder.
  • Son değer(80px) left margin değeridir.Yani margin-left: 80px; değerini temsil eder.

Eğer margin özelliği 3 değer almış ise:

  • İlk değer(20px) top margin değeridir.Yani margin-top: 20px; değerini temsil eder.
  • İkinci değer(30px) right ve left margin değerleridir.Yani margin-left :30px; ve margin-right: 20px; değerlerini temsil eder.
  • Son değer(40px) bottom margin değeridir.Yani margin-bottom: 40px; değerini temsil eder.

Eğer margin özelliği 2 değer almış ise:

  • İlk değer(40px) top ve bottom margin değerleridir.Yani margin-top: 40px; ve margin-bottom: 40px; değerlerini temsil eder.
  • İkinci değer(50px) right ve left margin değerleridir.Yani margin-right: 50px; ve margin-left: 50px; değerlerini temsil eder.

Eğer margin özelliği tek değer almış ise:

  • Bütün margin özelliklerini ifade eder.Yani margin-top: 60px; margin-bottom: 60px; margin-left: 60px; margin-right: 60px; ifadesine karşılık gelir.

Margin ile Ortalama

Margin elementler arasındaki mesafeyi ayarlamak için kullanıldığı kadar, elementleri sayfada ortalama (center) için de sıkça kullanılır.Bunun için margin özelliğinin auto değeri kullanılır.Auto değeri tarayıcıların dış boşlukları otomatik olarak algılamasını ve her iki yönden eşit boşluk bırakmasını sağlar.

Not : Bu özelliği kullanabilmek için margin:auto değeri verilen elementin blok düzeyi element olması gerekir.

Örnek Kullanım:

 

Margin sayfada elementlerin, diğer elementlere göre ayarlamasında kullanıldığı için CSS de oldukça önemli bir yere sahiptir.Margin konusunu iyi anlamak için CSS kutu modelini iyi anlamanız gerekir.

Tüm CSS Dersleri için tıklayın

BİZE KATILIN - KOLAY ERİŞİM
BİZE KATILIN - KOLAY ERİŞİM
İçeriklere ve web tasarım dünyasındaki gelişmelere kolay erişmek için bültene abone olmayı unutmayın
İstediğiniz zaman abonelikten çıkabilirsiniz.
Bunları da beğenebilirsin