CSS Dersleri 6: Margin Kullanımı

 26 Eki 2016

Hüseyin Körbalta

 Yorum Yok »

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…

 Yazı Etiketleri

• CSS Margin
• CSS Margin İle Ortalama
• CSS Margin Özelliği
• CSS Margin Özelliği İle Yazı Ortalama
• CSS Margin Parametreleri
• CSS'de Margin Kullanımı

• 

  Sık Kullanılan CSS Ölçü Birimleri

  Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
• 

  CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

  Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
• 

  CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

  Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
• 

  CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

  Selamlar, CSS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde CSS'de Yükseklik ve Genişlik Değerleri ni nasıl kullanacağımızı, html elemenlerimize nasıl yükseklik ve genişlik vereceğimizi öğreneceğiz. Daha önce ki css derslerime göz atarak eksikleriniz var ise tamamlayabilirsiniz. [mks_icon icon="fa-folder-open" color="#1e73be" type="fa"] Diğer CSS Dersleri: CSS Dersleri 1: CSS Nedir ? CSS…