margin

margin özelliği, elementin dört kenarının dış kenar paylarının genişliklerinin belirlenmesini sağlar. Ayrıca kenar payları her kenar için ayrı ayrı marginBottom, marginTop, marginLeft ve marginRight özellikleri ile belirtilebilir.

DOM Sözdizimi

element.style.margin = "kenarPayi"

CSS Sözdizimi

margin: kenarPayi

kenarPayi

auto atanarak kenar paylarını otomatik belirler. Ayrıca CSS Ölçü Birimleri ve yüzde değerleri ile aralarında boşluk bırakarak dört taneye kadar farklı değer belirtilebilir. Bu değerler aşağıda gösterilmiştir.

Bir değer belirtilirse, dört kenar için uygulanır.
İki değer belirtilirse, ilk değer üst (top) ve alt (bottom), ikinci değer sol (left) ve sağ (right) kenar payı genişliklerini belirler.
Üç değer belirtilirse, ilk değer üst (top), ikinci değer sol (left) ve sağ (right), üçüncü değer ise alt (bottom) kenar payı genişliklerini belirler.
Dört değer belirtilirse, bunlar sırasıyla üst (top), sağ (right), alt (bottom) ve sol (left) kenar payı genişliklerini belirler.

Elementin dört kenarının kenar payı (margin) rengi her zaman saydamdır (transparent).

CSS margin Değerlerinin Gösterimi

margin:	Canlı Sonuç	Açıklama
10px		Üst : 10px Sağ : 10px Alt : 10px Sol : 10px
10px 20px		Üst : 10px Sağ : 20px Alt : 10px Sol : 20px
10px 20px 30px		Üst : 10px Sağ : 20px Alt : 30px Sol : 20px
10px 20px 30px 40px		Üst : 10px Sağ : 20px Alt : 30px Sol : 40px

Aşağıdaki örnek, bir div elementinin style.margin özelliğine sırasıyla 1, 2, 3 ve 4 tane farklı değer atanmasını göstermektedir.


<style type="text/css">
.marginBir, .marginIki, .marginUc, .marginDort {
    width:120px;
    height:90px;
    background-color:white;
}
.marginBir {
    margin:10px;
}
.marginIki {
    margin:10px 20px;
}
.marginUc {
    margin:10px 20px 30px;
}
.marginDort {
    margin:10px 20px 30px 40px;
}
.ornekTablo {    
    border-collapse:separate;
}
.ornekTablo th {
    background-color:green;
    color:white;
    padding:5px;
}
td.cerceve {
    background-color:#2080D0;
}
</style>

<table class="ornekTablo" border="0" cellpadding="0" cellspacing="3">
<tr>
    <th>10px</th>
    <th>10px 20px</th>
</tr>
<tr>
    <td>
        <table><tr><td class="cerceve">
            <div class="marginBir"></div></td></tr>
        </table>
    </td>
    <td>
        <table><tr><td class="cerceve">
            <div class="marginIki"></div></td></tr>
        </table>
    </td>
</tr>
<tr>
    <th>10px 20px 30px</th>
    <th>10px 20px 30px 40px</th>
</tr>
<tr>
    <td>
        <table><tr><td class="cerceve">
            <div class="marginUc"></div></td></tr>
        </table>
    </td>
    <td>
        <table><tr><td class="cerceve">
            <div class="marginDort"></div></td></tr>
        </table>
    </td>    
</tr>
</table>

Canlı Sonuç

10px

10px 20px

10px 20px 30px

10px 20px 30px 40px

İlgili Başlıklar