CSS Padding

Di blog sebelum nya, kami sudah membahas tentang penggunaan properti padding pada CSS. Sekarang kami mau membahas penggunaan properti padding pada CSS.

Beda dengan properti margin, padding menentukan space kosong antara border dengan content suatu element. Dengan menggunakan padding, area di sekeliling suatu element di dalam border menjadi kosong. Warna background pada padding ditentukan oleh warna backround pada element tersebut.

Padding atas, bawah, kanan, kiri dapat di set secara individual menggunakan properti nya masing-masing. Seperti margin, semua padding juga dapat digabung dalam 1 properti, ini dinamakan shorthand padding property.

Value pada suatu padding dapat di set sebagai berikut:

Value	Description
length	Defines a fixed padding (in pixels, pt, em, etc.)
%	Defines a padding in % of the containing element

Padding - Individual sides
Berikut ini cara membuat padding dengan menentukan batas atas, bawah, kanan, kiri secara individual.

padding-top:10px; padding-bottom:15px; padding-right:20px; padding-left:50px;

Padding - Shorthand property
Untuk memperpendek code, semua padding dapat dibuat dalam 1 buah properti. Berikut ini adalah cara penulisan shorthand property pada padding.

• padding:25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px
  
  
• padding:25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px
  
  
• padding:25px 50px;
  • top and bottom paddings are 25px
  • right and left margins are 50px
  
  
• padding:25px;
  • all four paddings are 25px

http://blog.aerje.com