Css Kenar İçi Boşluk

Css kenar içi boşluk padding özelliği ile kullanılmaktadır. Padding özelliği iç kenardan boşluk bırakmak için kullanılmaktadır. Yani html ögemizin kendi iç çerçevesinden boşluk bırakmak için kullanılır. Html ögesinin iç kenarından doğru boşluk bıraktığı için kenar içi boşluk denmektedir.

Css Kenar İçi Boşluk Özelliikleri:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding

Padding-top Özelliği

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

Padding-top Özelliği Kullanımı

<style type="text/css">

.kenariciboslukust{

border-style:solid;
border-color:red;

padding-top:25px;

}

</style>               

Kodu Çalıştır

Padding-right Özelliği

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

Padding-right Özelliği Kullanımı

<style type="text/css">

.kenaricibosluksag{

border-style:solid;
border-color:red;

padding-right:25px;

}

</style>                     

Kodu Çalıştır

Padding-bottom Özelliği

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

Padding-bottom Özelliği Kullanımı

<style type="text/css">

.kenariciboslukalt{

border-style:solid;
border-color:red;

padding-bottom:25px;

}

</style>                   

Kodu Çalıştır

Padding-left Özelliği

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

Padding-left Özelliği Kullanımı

<style type="text/css">

.kenaricibosluksol{

border-style:solid;
border-color:red;

padding-left:25px;

}

</style>             

Kodu Çalıştır

Padding Özelliği

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

PaddingÖzelliği Kullanımı

<style type="text/css">

.kenaricibosluk{

border-style:solid;
border-color:red;

padding:25px 25px 25px 25px;

}

</style>                

Kodu Çalıştır

Önceki Ders: Css Kenar Dışı Boşluk Sonraki Ders: Css Kaydırma