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 |
|
|
|