CSS Dış Kenar Boşluğu - Margin

margin etiketlerin/elemanların çevresini temizler/boşaltır. margin tamamen şeffaftır ve bir arkaplan rengi yoktur.

margin kullanıldığında etiketlerin/elemanların 4 bir yanıda temizlenir/boşaltılır. Üst, sağ, alt ve sol kenarlar birbirinden bağımsız olarakta kullanılabilir.

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

Tüm margin özelliklerinde piksel (margin:10px;), yüzde (margin-top:50%;) ve em (margin-left:1.5em) kullanılabilmektedir. Ayrıca auto özelliği de kullanılabilmektedir. auto özelliği kullanıldığında mesafeyi tarayıcı/browser kendi ayarlayacaktır. Eksi kullanımı mümkündür (margin-bottom:-10px;).

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

Bir kutunun her açısında farklı margin kullanmak mümkündür. (top=üst, right=sağ, bottom=alt, left=sol)

div {
    margin-top:100px;
    margin-right:50px;
    margin-bottom:100px;
    margin-left:50px;
}

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

Dış kenar boşluğu / margin için kısa yazımı görelim.

• 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.)