CSS (DIŞ BOŞLUK)MARGİN NEDİR, KULLANIMI NASILDIR?

Margin özelliği, elementin dört kenarına dıştan boşluk vermeye yarar. Negatif değer alabilir. Ayrıca kenar payları her kenar için ayrı ayrı margin-bottom, margin-top, margin-left ve margin-right özellikleri belirtildiği gibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerini anlamak için lütfen Box(kutu) modellerine bir göz atın.

Margin üstten başlar daha sonra saat yönünde ilerler. (Üst, Sağ, Alt ve Sol)

• margin - Hızlı kullanım
• margin-top - Üstten boşluk
• margin-right - Sağdan boşluk
• margin-bottom - Alttan boşluk
• margin-left - Soldan boşluk

Alabileceği değerler:

• auto - Kenarlıklar tarayıcı tarafından otomatik ayarlanır
• uzunluk - piksel, punto,santimetre olarak boşluk belirtme
• % - İçerik genişliğine göre yüzdeli olara boşluk belitme
• inherit - Ana elemandan özelliği miras alarak belirtme

CSS Çoklu Dış Kenar Boşluğu Kullanımı(Margin Individual Sides)

CSS, bir elementin farklı tarafları için farklı kenar boşlukları belirtmek mümkündür.

Örnek:

p {
    margin-top: 100px;

    margin-bottom: 100px;

    margin-right: 75px;

    margin-left: 50px;
  }

CSS Dış Kenar Boşluğu Kısa Yazım - Margin Shorthand Property

Sadece margin kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi (üstten başlayarak saat yönünde) sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

Örnek:

p {
    margin: 100px 50px;
  }

• margin: 25px 50px 75px 100px; (üst 25 piksel, sağ 50 piksel, alt 75 piksel, sol 100 piksel olur.)
• margin: 25px 50px 75px; (üst 25 piksel, sağ ve sol 50 piksel, alt 75 piksel olur.)
• margin: 25px 50px; (üst ve alt 25 piksel, sağ ve sol 50 piksel olur.)
• margin: 25px; (Tüm dış kenar boşlukları 25 piksel olur.)

Örnek: Parağraflarımıza dış boşluk verelim.

p {
    background-color: yellow;
  }

p.ek {
    margin-top: 100px;

    margin-bottom: 100px;

    margin-right: 100px;

    margin-left: 50px;
}

HTML:

<p>Hiç margin özelliği verilmemiş parağraf</p>

<p class="ek">margin belirtilmiş parağraf</p>

ÇIKTI:

Örnek: İki kutu oluşturalım üsteki kutuya göre boşluk verelim

CSS:

.kutu{width:100px;

     height:100px;

     background-color:blue;

     }
	 
.kutu1{width:100px;

      height:100px;

      background-color:blue;

      margin-left:80px;

      margin-top:50px;

      }

HTML:

	
<div class="kutu"></div>

<div class="kutu1"></div6gt;

ÇIKTI: