Dış Kenar Boşluğu – Margin

Dış Kenar Boşluğu diğer adı ile Margin özelliği elemanların çevresini bir tabaka olarak temizler. Bir elamanın çevresini beyaz olarak ayarlar. Dış Kenar Boşluğu (Margin) arka plan rengi yoktur ve verilememektedir. Bir elemana verilen bu boşluk 4 kenardan verilmektedir ancak isteğe bağlı bu 4 köşeden ayrı ayrı da verilebilmektedir.

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

Margin özelliğinde piksel (margin: 20px;), yüzde (margin-left: 20%;), em (margin-right: 2em;) ve rem (margin-top: 1rem;) kullanılabilmektedir. Buna ek olarak ta “auto” özelliği de kullanılabilmektedir. “auto” özelliği kullanıldığında tarayıcı kendi inisiyatifine bağlı olarak her taraftan eşit bir şekilde değer atar. Ve kendi değerlerince boşluk bıraktırır.

CSS Çoklu Dış Kenar Boşluğu

Bir elemanın kenarlarına farklı Margin değeri vermek mümkündür. Bu değerler farklı da olabilir aynı da olabilir. Değerler verildiğinde elemanın etrafında verilen değerlere göre boşluk olacaktır.

“margin-top” üst kısma verilen boşluktan sorumludur. Bu özelliğe verilen değer üst kısımda boşluk bıraktırır.
“margin-right” sağ kısımdaki boşluktan sorumludur. Bu özelliğe verilen değer sağ kısımda boşluk bıraktırır.
“margin-bottom” alt kısımdaki boşluktan sorumludur. Bu özelliğe verilen değer alt kısımda boşluk bıraktırır.
“margin-left” sol kısımdaki boşluktan sorumludur. Bu özelliğe verilen değer solkısımda boşluk bıraktırır.

span {
    margin-top: 70px;
    margin-right: 60px;
    margin-bottom: 70px;
    margin-left: 60px;
}
span {
    margin-top: 20%;
    margin-right: 18%;
    margin-bottom: 20%;
    margin-left: 18%;
}
span {
    margin-top: 1.2em;
    margin-right: 1.1em;
    margin-bottom: 1.2em;
    margin-left: 1.1em;
}
span {
    margin-top: 1.2rem;
    margin-right: 1.1rem;
    margin-bottom: 1.2rem;
    margin-left: 1.1rem;
}

CSS Dış Kenar Boşluğu Kısa Yazım

CSS Dış Kenar Boşluğu Kısa Yazımı yukarıda belirtilen değerlerin tek satırda yazmamıza olanak sağlar. Kod kalabalığına bir birdir ve aynı zamanda alandan kazanç sağlanmaktadır. Tüm kenar boşluklarını tek satırda yazılmasını sağlar. İlk parametre üst kısmı temsil eder ikinci parametre sağ kısmı temsil etmekte üçüncü kısım ise alt kısmı ve son olarak ta dördüncü parametre sol kısmı temsil etmektedir.

span {
    margin: 70px 60px 70px 60px; 
}
span { 
    margin: 20% 18% 20% 18%; 
}
span { 
    margin: 1.2em 1.1em 1.2em 1.1em; 
}
span { 
    margin: 1.2rem 1.1rem 1.2rem 1.1rem; 
}