myNotlar Logo

margin


Internet Explorer Firefox Opera

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
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |