CSS MARGIN ÖZELLİKLERİ

Merhana..

CSS'İn sayfadaki tüm elemanları bir kutu gibi gördüğünden daha önce bahsetmiştim Kutular için bir çok özellik tannımlanabiliyorr. Elemanlar ile etrafı  arası boşluk miktarlarını ayarlamamızı sağlayan MARGIN özelliğide bunlardan biridir.

MARGIN

Bir elemanın dış boşluklarıdır. Yada yukarıda beliritildiği igibi , çevresindeki elemanlarla  arasındaki mesafelerdir. Css ile bu boşluklar tümden MARGIN özelliği ile  tanımlanabileceği gibi , 

• MARGIN (tüm kenar boşlukları)
• MARGIN-TOP (üst kenar dışı boşluğu)
• MARGIN-RIGHT (sağ kenar dışı boşluğu)
• MARGIN-BOTTOM (alt kenar dışı boşluğu)
• MARGIN-LEFT  (sol kenar dışı boşluğu)       

şeklinde ayrı ayrı da tanımlanabilir..

GENEL KULLANIM

.kutu  {
   margin:50px;   //  tüm kenar boşlukları 50 px olur..
   margin-top:50px;   //  üst kenar boşluğu 50 px olur..
   margin-right:50px;   //  sağ kenar boşluğu 50 px olur..
   margin-bottom:50px;   // alt kenar boşluğu 50 px olur..
   margin-left:50px;   //  sol kenar boşluğu 50 px olur..
}

EKRAN

Yukarıdaki .kutu classı DIV tüm dış kenarlarında 50px boşluk bırakır.  Sayfadaki tek eleman olduğundan sağ ve alt kenarında başka eleman olmadığı için , sağ ve alt kenar boşluğu için verdiğimiz değeri göremeyiz.  Ancak  sayfa elemanları  CSS ile aksi şekilde müdahale edilmedikleri sürece  SOL ÜST kenardan başlayarak yerleştikleri içib SOL ve ÜST margin değerleri uygulanmış olur...

MARGIN İLE ORTALAMA

Blok bir elemanı bulunduğu yere ortalamak için , sağ sol marginleri AUTO olarak ayarlanır. Auto ile sağ ve sol marginleri elemanın dışında kalan sal , sağ boşluklara göre otomatik paylaştır gibi düşünebiliriz....

GENEL KULLANIM

.kutu  {
   margin-top:50px;   //  üst kenar boşluğu 50 px olur..
   margin-right:auto;   //  sağ kenar boşluğu 50 px olur..
   margin-left:auto;   //  sol kenar boşluğu 50 px olur..

   //yada

   margin:50px auto;     // üst ve alt kenar boşluğu 50px olurken , sol ve sağ alt kenar boşlukları otomarik ayarlanır..

}

EKRAN

MARGIN KISALTMALARI

Margin değerleri farklı kenarlar için verilirlen , yukarıda tanımlandığı gibi , ayrı ayrı yazıılabileceği gibi , kısaltmalarlada belirtilebilir..

4'LÜ GÖSTERİM

Margin ile tüm kenar boşuklarını aynı anda yazılabilir. Bunun için saat yönü sıralaması kullanılır:

1. değer üst

2. değer sağ

3. değer alt

4. değer sol 

boşlukları ayarlar..

div { 

  margin: 15px 20px 25px 30px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.
  margin-top:15px;
  margin-top:20px;
  margin-top:25px;
  margin-top:30px;

}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar boşluğu 15 , sağ kenar boşluğu 20 , alt kenar boşluğu 25 , sol kenar boşluğuda 30px olur: 

3'LÜ GÖSTERİM

Margin ile 3lü tanımlamada yine saat yönü sıralaması kullanılır: Ancak 4'lü gösterimden farklı olarak  2. değer hem sol hem sağ kenarın boşluğunu ayarlar..

1. değer üst

2. değer sol ve sağ

3. değer alt

boşlukları ayarlar..

div { 

  margin: 15px 20px 25px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.

  margin-top:15px;
  margin-right:20px;
  margin-bottom:25px;
  margin-left: 20px  
 
}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar boşluğu 15 ,  sağ ve sol kenar boşlukları 20px , alt kenar boşluğu 25 ,   sol kenar boşluğu da 30px olur.. 

2'Lİ  GÖSTERİM

Margin ile 2'li tanımlamada ilk değer üst ve alt boşluğu ayarlarken, ikinci değer sol ve sağ boşluğu ayarlar..

1. değer üst ve alt 

2. değer sol ve sağ

boşlukları ayarlar..

div { 

  margin: 15px 20px;

  // Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.

  margin-top:15px;  margin-bottom:15px;
  margin-left: 20px;  margin-right:20px;

}

Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar boşluğu 15 ,  sağ ve sol kenar boşlukları 20px , alt kenar boşluğu 25 ,  sol kenar boşluğu da 30px olur.. 

Görüşmek Üzere...