Belajar CSS Part 6 - Padding

Assalamu'alaikum warohmatullaahi wabarokaatuh

Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang padding. Padding adalah area kosong yang menjadi jarak antara konten dari sebuah elemen dengan border.

A. PENDEFINISIAN SETIAP SISI SECARA TERPISAH

Seperti halnya Border dan Margin, Padding juga bisa didefinisikan secara terpisah untuk masing-masing sisi atas, kanan, bawah, dan kiri. Untuk mempelajari penggunaannya pada border bisa Anda baca di Belajar CSS Part 4 - Border. Untuk mempelajari penggunaannya pada margin bisa Anda baca di Belajar CSS Part 5 - Margin. Properti yang digunakan untuk masing-masing sisi adalah sebagai berikut :

• padding-top - sisi atas
• padding-right - sisi kanan
• padding-bottom - sisi bawah
• padding-left - sisi kiri

Value yang bisa digunakan untuk properti padding adalah :

• Menspesifikasikan padding dengan ukuran panjang (px, cm, in, dsb)
• % : menspesifikasikan padding dalam ukuran persentase dari elemen.
• inherit : dengan value ini, padding akan mengikuti elemen induknya.

Contoh :

p {
    padding-top: 100px;
    padding-bottom: 80px;
    padding-right: inherit;
    padding-left: 20%;
}

Penjelasan :

• Padding atas paragraf diberi value 100 pixel
• Padding bawah paragraf diberi value 80 pixel
• Padding kanan paragraf diberi value yang sama dengan elemen induk dari paragraf.
• Padding kiri paragraf diberi value 20 persen dari lebar elemen.

Coba sendiri di sini

B. SHORTHAND PROPERTY

Seperti halnya border dan margin, padding juga bisa menggunakan metode shorthand property untuk meringkas penulisan script. Contoh penggunaannya adalah sebagai berikut :

p {
    padding: 100px 100px 150px 80px;
}

Penjelasan :

• Padding atas paragraf diberi value 100 pixel
• Padding kanan paragraf diberi value 100 pixel
• Padding bawah paragraf diberi value 150 pixel.
• Padding kiri paragraf diberi value 80 pixel.

Coba sendiri di sini


Demikian Seri Belajar CSS tentang Padding, semoga bermanfaat. Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.