Css Kenar Dışı Boşluk

Css kenar dışı boşluk margin özelliği ile kullanılmaktadır. Margin özelliği dış kenardan boşluk bırakmak için kullanılır. Yani html ögemizin kendisine ait çerçevesi bulunmakta bu çerçeveye olan uzaklığı belirtmek için margin özelliği kullanılmaktadır. Dış kenardan boşluk bırakıldığı için kenar dışı boşluk denmektedir.

Css Kenar Dışı Boşluk Özelliikleri:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

Margin-top Özelliği

Margin-top özelliği üst dış kenardan boşluk bırakmak için kullanılır.

Margin-top Özelliği Kullanımı

<style type="text/css">

.kenardisiboslukust{

border-style:dotted;
border-color:red;

margin-top:100px;

}

</style>
                    

Kodu Çalıştır

Margin-right Özelliği

Margin-right özelliği sağ dış kenardan boşluk bırakmak için kullanılır.

Margin-right Özelliği Kullanımı

<style type="text/css">

.kenardisibosluksag{

border-style:dotted;
border-color:red;

margin-right:100px;

}

</style>     

Kodu Çalıştır

Margin-bottom Özelliği

Margin-bottom özelliği alt dış kenardan boşluk bırakmak için kullanılır.

Margin-bottom Özelliği Kullanımı

<style type="text/css">

.kenardisiboslukalt{

border-style:dotted;
border-color:red;

margin-bottom:100px;

}

</style>                  

Kodu Çalıştır

Margin-left Özelliği

Margin-left özelliği sol dış kenardan boşluk bırakmak için kullanılır.

Margin-left Özelliği Kullanımı

<style type="text/css">

.kenardisibosluksol{

border-style:dotted;
border-color:red;

margin-left:100px;

}

</style>                    

Kodu Çalıştır

Margin Özelliği

Margin özelliği üst, sağ, alt ve sol dış kenarlardan tek bir özellik sayesinde boşluk bırakmak için kullanılır. Boşluk bırakma işlemi sırası ile  üst, sağ, alt ve sol 'dur.

Margin Özelliği Kullanımı

<style type="text/css">

.kenardisibosluk{

border-style:dotted;
border-color:red;

margin:100px 100px 100px 100px;

}

</style>                  

Kodu Çalıştır

Önceki Ders: Css Kenarlık Sonraki Ders: Css Kenar İçi Boşluk