CSS Part 8 : CSS Padding

Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS Padding.

CSS Padding
CSS padding properti yang digunakan untuk menghasilkan ruang di sekitar konten.
Padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen.
Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Padding - Individual Sides
CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen.
padding-top
padding-right
padding-bottom
padding-left

Semua padding dapat memiliki nilai berikut:
 panjang-menetapkan padding di px, pt,cm, dll.
%-menentukan bantalan di % dari lebar elemen dari elemen yang mengandung.
mewarisi-menetapkan bahwa padding harus diwarisis dari elemen induk.

Contoh berikut menetapkan bantalan padding yang berbeda untuk semua empat sisi dari <p> elemen.
Contoh
p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Properti Steno
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti padding satu properti.
Tag padding properti adalah properti singkatan untuk padding individu berikut.
padding-top
padding-right
padding-bottom
padding-left

Contoh
p{
padding: 50px 30px 50px 80px;
}

Jadi, di sini adalah cara kerjanya:
Jika padding properti memiliki empat nilai.
padding: 25px 50px 75px 100px;
 padding atas adalah 25px
 padding kanan adalah 50px
 padding bawah adalah 75px
 padding kiri adalah 100px

Jika padding properti memiliki tiga nilai:
padding: 25px 50px 75px;
 padding atas adalah 25px
  padding kanan dan kiri adalah 50px
 padding bawah adalah 75px

Jika padding properti memiliki dua nilai:
padding: 25px 50px;
 padding atas dan bawah yang 25px
 padding kanan dan kiri adalah 50px

Jika padding properti memiliki satu nilai:
padding: 25px;
 keempat padding adalah 25px

Contoh
div.ex1{
padding: 25px 50px 75px 100px;
}
div.ex2{
padding: 25px 50px 75px;
}
div.ex3{
padding: 25px 50px;
}
div.ex4{
padding: 25px;
}

REFERENSI
http://www.w3schools.com/css/css_padding.asp