CSS Margin Özellikleri Nelerdir ve Nasıl Uygulanırlar?

CSS margin özellikleri (Kenar dış boşluğu) bir elemanın etrafındaki boşluklara yapılan stillendirmelerdir. Bu değerler negatif değer alabilir. Tek tek özellikler (margin-top, marginleft vb.) atanabildiği gibi tek bir özellikle (margin) de tanımlama yapılabilir.

Üst Kenar Dış Boşluğu (margin-top)

p
{
    margin-top: 25px;
}

margin-top özelliği elemanın üst kenar dış boşluğunu belirli bir değer kadar veya yüzde olarak belirler. Negatif değer alabilir.

Internet Explorer 6’da body elementi veya kapsayıcı blok elemanlara genişlik tanımı yapıldığında dikeydeki kenar dış boşluğu(margin-top) yüzde değer kullanıldığında soruna nende oluyor.

Internet Explorer 7 ve alt sürümlerinde kenar dış boşluğu çökmesi sorunu yaşanmaktadır.

Sağ Kenar Dış Boşluğu (margin-right )

p
{
    margin-right: 25px;
}

margin-right özelligi elemanın sag kenar dıs boslugunu belli bir değer kadar veya yüzde olarak belirler. Negatif deger alabilir.

Internet Explorer 5.5 (IE6 garip mod dâhil) blok seviyeli elemanların ortalanması için kenar dış boşluğu sağ ve solu için verilen auto yöntemini desteklememektedir.

Internet Explorer 6 ve alt sürümlerinde float uygulanmış elemanlara uygulanan sağ ve sol kenar boşluğu değerini iki kere uygular.

Alt Kenar Dış Boşluğu (margin-bottom)

p
{
    margin-bottom: 25px;
}

margin-bottom özelliği elemanın alt kenar dış boşluğunu belli bir değer kadar veya yüzde olarak belirler. Negatif değer alabilir.

Internet Explorer 6’da body elementi veya kapsayıcı blok elemanlara genişlik tanımı yapıldığında dikeydeki kenar dış boşluğu (margin-top) yüzde değerlerinde sorun yaşanıyor.

Internet Explorer 7 ve alt sürümlerinde kenar dış boşluğu çökmesi sorunu yaşanmaktadır.

Sol Kenar Dış Boşluğu (margin-left)

p
{
    margin-left: 25px;
}

margin-left özelligi elemanın sol kenar dış boşluğunu belli bir değer kadar veya yüzde olarak belirler. Negatif değer alabilir.

Internet Explorer 5.5 (IE6 garip mod dâhil) blok seviyeli elemanların ortalanması için kenar dış boşluğu sağ ve solu için verilen auto yöntemini desteklememektedir.

Internet Explorer 6 ve alt sürümlerinde float uygulanmış elemanlara uygulanan sağ ve sol kenar boşluğu değerini iki kere uygular.

Kenar Dış Boşluğu (margin)

p
{
    margin: 25px; /* bütün kenarlara uygulanır. */
}
p
{
    margin: 25px 50px;  /* alt ve üst kenar 25px sağ ve sol kenar 50px uygulanır. */
}
p
{
    margin: 25px 50px 45px; /* üst kenar 25px sağ ve sol kenar 50px alt kenar 45px uygulanır. */
}
p
{
    margin: 25px 35px 45px 55px; /* üst kenar 25px sağ kenar 35px alt kenar 45 px ve sol kenar 55px uygulanır. */
} 

margin özelliği yukarıdaki özelliklerin tek bir özellikle uygulanması için kullanılır. Bir kısa yoldur.

Internet Explorer 6’da body elementi veya kapsayıcı blok elemanlara genişlik tanımı yapıldığında dikeydeki kenar dış boşluğu (margin-top) yüzde değerlerinde sorun yaşanıyor.

Internet Explorer 5.5 (IE6 garip mod dâhil) blok seviyeli elemanların ortalanması için kenar dış boşluğu sağ ve solu için verilen auto yöntemini desteklememektedir.

Internet Explorer 7 ve alt sürümlerinde kenar dış boşluğu çökmesi sorunu yaşanmaktadır.

Internet Explorer 6 ve alt sürümlerinde float uygulanmış elemanlara uygulanan sağ ve sol kenar boşluğu değerini iki kere uygular.

CSS margin özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar