Hüseyin Körbalta

CSS Dersleri 6: Margin Kullanımı

Merhabalar,

Daha önce ki CSS dersimde CSS’de Kenarlıklar (Borders) Kullanımı‘nı anlatmıştım. Bu yazımda ise Margin (Kaydırma) Css özelliğini kullanımını anlatacağım. CSS’de Margin Kullanımı oldukça basittir. Bu yazımda elimden geldiğince CSS’de Margin Kullanımı detaylı olarak sizlere aktaracağım.

Yazıma başlamadan önce daha önce ki css derslerime aşağıda ki bağlantıları kullanarak ulaşabilirsiniz.

• CSS Dersleri 1: CSS Nedir ?
• CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler
• CSS Dersleri 3: Renklerin Kullanımı
• CSS Dersleri 4: Arkaplan (Background) Özellikleri
• CSS Dersleri 5: Kenarlıklar (Borders)

CSS Margin Nedir?

CSS’de Margin Kullanımı

HTML elementleri bir sayfada yer işgal ederler.Bu elementlerin dış kısmında kalan boşluklarına margin denir.Diğer bir deyişle html elementlerin kenarlıklarının dışında kalan ve diğer elementlerle ayrılmasını sağlayan saydam alana margin diyoruz.CSS margin özellikleri ise bu saydam dış boşluğu ayarlamak için kullanılır.

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

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

Yukarıda verdiğim bu 4 tane margin (kaydırma) parametreleri aşağıda verdiğim 4 tane değeri alabilirler. Yani, yukarıda ki css margin parametlerinin her biri aşağıda ki değerleri alabilirler.

• auto : HTML elementinin dışında kalan boşluk kısımlarını tarayıcı tarafından otomatik olarak 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 alır.

Yukarıda bahsettiğim parametrelerin ve değerlerin örnek kullanımı aşağıda ki örnekte ki gibidir.

p {
  margin: 0 auto;
}
p {
  margin: 20px 40px;
}
p {
  margin: 0 50%;
}
p {
  margin: inherit;
}

CSS’de Margin Kullanımı – Kısaltılmış Özellik (Margin)

Aşağıda verdiğim margin parametrelerini ayrı ayrı vermek yerine sadece margin: parametresini kullanabilir ve bütün değerleri verebilirsiniz. Bu özelliğin amacı CSS kodlarını kolay ve hızlı yazabilmek için kullanılmaktadır.

Margin Parametreleri:

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

Bütün bu parametreleri tek bir satırda ve kısaltılmış özellik olan margin parametresinde kullanabiliriz. Nasıl mı ? Örnek kullanımı aşağıda ki gibidir.

div {
 margin: 20px 30px 40px 80px;
}

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

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

margin: 20px 30px 40px 80px;

• 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:

margin: 20px 30px 40px;

• İ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:

margin: 40px 50px;

• İ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:

margin: 60px;

• 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

CSS’in margin özelliği html elementlerin 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.
[label style=”red”]Not :[/label] Bu özelliği kullanabilmek için margin:auto değeri verilen elementin blok düzeyi element olması gerekir.

Örnek kullanımı:

div { 
  width: 400px; 
  margin: auto;
}

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

Bu ders yazım da CSS’in margin özelliğinin kullanımı ve margin özelliğinin nasıl kullanılacağı anlatılmıştır.Ayrıca web sayfalarında sıkça uygulanan ortalama işleminin css margin özelliği  ile nasıl gerçekleştirileceği anlatılmıştır.Bir sonraki css ders yazımda margin özelliğinin tersi gibi çalışan css padding konusuna değineceğim.

Esen kalın…