CSS'de margin nasıl kullanılır

CSS'de margin nasıl kullanılır

0.0 (0 oy)
CSS'deki margin, belirli bir elementin etrafındaki boşluğu belirten özelliktir.

Margin
Margin özelliği elementin border(dış çizgi)ının etrafındaki boşluğu belirtmek için kullanılır. Margin'in arka planı özelliği yoktur ve tamamen saydamdır. Farklı özellikler belirterek elementin sağ, sol, üst ve alt bölgelerine margin ekleyebilirsiniz.

Ayrı ayrı margin değerleri

Yukarıda belirttiğimiz gibi ayrı ayrı bölgelere farklı marginler verebilirsiniz. Bunlar;

Üst:  margin-top:
Alt:   margin-bottom;
Sağ:  margin-right;
Sol:  margin-left;

Şimdi bu margini örneklendirelim:

CSS Kodu

.resim {

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


}

HTML Kullanımı



Tabii CSS margin için kısa bir yol da var. Üstteki kodda uzun uzun değerleri yazacağımıza şu şekilde de css margin verebiliriz:

.resim {

margin:  10px 20px 10px 20px;

}

Bu şekilde de aslında üstteki ilk örnek css  kodunun aynısı yazmış olduk. Bunun da değerleri şunun gibidir:

margin: üst sağ alt sol

Yazı yeni başlayanlar için biraz karışık gelmiş olabilir. Yeni başlayanlar için alttaki kodu alıp denemelerini tavsiye ediyorum. İçindeki margin değerleriyle oynayarak ne işe yaradığını daha iyi bulabilirsiniz.

Bu kodu alıp margin.html şeklinde kaydedin:

.resim {

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


}



Margin - Individual sides


In CSS, it is possible to specify different margins for different sides: