Monday, December 22, 2014

Tutorial CSS Part 13: Mengatur Padding

Padding adalah area bebas yang berada didalam elemen dan terletak diantara border dengan isi. Berbeda dengan margin, padding terpengaruh oleh warna background. Padding dipakai untuk memberi jarak isi elemen agar enak dilihat, tidak terlalu sempit dan berimpit dengan garis border.

ilustrasi margin dan padding
Cara Mengatur Padding

Untuk mengatur padding, kita menggunakan properti CSS padding. Nilai dari properti padding bisa diset beberapa cara, yaitu :
  • panjang, artinya memberi nilai padding dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
  • persen (%), artinya nilai padding diambil dari persentase lebar dari isi elemen.

Contoh penggunaan CSS padding :

p {      
   padding : 3px;      
} 
Cara diatas merupakan cara singkat dalam mengatur padding. Dengan perintah diatas kita menentukan padding sebesar 3px untuk tiap sisi.

Mengatur padding secara individual

Seperti margin, kita juga bisa mengatur nilai padding dengan nilai yang berbeda untuk setiap sisi dengan cara sebagai berikut :

Mengatur padding individual dengan penulisan singkat

Dengan cara ini kita mengatur padding secara individual tiap sisi dengan menuliskan beberapa nilai pada properti padding. Ada beberapa cara yang bisa dilakukan, perhatikan contoh berikut ini :
p {  
   padding : 5px 3px 2px 4px;      
}   
Artinya kita mengatur nilai padding :
  • padding atas = 5px 
  • padding kanan = 3px 
  • padding bawah = 2px 
  • padding kiri = 4px
p {  
   padding : 5px 3px 2px;      
}   
Artinya kita mengatur nilai padding :
  • padding atas = 5px 
  • padding kanan dan kiri = 3px 
  • padding bawah = 2px
p {  
   padding : 5px 3px;      
} 
Artinya kita mengatur nilai padding :
  • padding atas dan bawah = 5px
  • padding kanan dan kiri= 3px
Kita bisa berlatih CSS padding individual secara langsung disini >>

Mengatur padding individual dengan penulisan properti tersendiri

Selain penulisan diatas, kita bisa mengatur padding tiap sisi dengan properti tersendiri.
Ada empat properti CSS yang disediakan untuk mengatur padding tiap sisi, yaitu : 
  • padding-top, untuk mengatur padding sisi atas
  • padding-right, untuk mengatur padding sisi kanan
  • padding-bottom, untuk mengatur padding sisi bawah
  • padding-top, untuk mengatur padding sisi kiri
Contoh penggunaan CSS padding secara individual dengan properti :
p {
    padding-top: 10px;
}
Kita bisa berlatih CSS padding individual dengan properti disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment