Fungsi dan kegunaan padding pada CSS

Kegunaan padding

Padding pada CSS digunakan untuk memberikan ruang space disekitar elemen atau konten. Padding sendiri bisa diatur pada setiap sisi dengan properti: padding-top, padding-right, padding-bottom dan padding-left dan bisa juga untuk semua sisi sekaligus. Dalam web design padding mempunyai peranan penting dalam mengatur jarak antar konten.

#kuning {
    background-color: yellow;
}
#merah {
    background-color: red;
    padding: 15px 40px;
}
#hijau {
    background-color: green;
    padding: 30px 15px;
}

Padding individu

Anda bisa mengatur padding lebih spesifik atau mendetail dengan menggunakan istilah padding individu. Yang dimaksud dengan padding individu sendiri, Anda bisa mengatur jarak padding untuk setiap sisi elemen:

• padding-top ( atas )
• padding-right ( kanan )
• padding-bottom ( bawah )
• padding-left ( kiri )

Semua properti padding dapat memiliki nilai berikut:

• Length – ukuran padding ditentukan dalam satuan seperti px, pt, cm, dll.
• % – menentukan padding sebagai persentase memungkinkannya untuk beradaptasi ketika ukuran layar berubah
• Inherit – menetapkan bahwa padding harus diwarisi dari elemen induknya

#kuning {
    background-color: yellow;
}
#hijau {
    background-color: green;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 80px;
}

Padding shorthand

Dengan padding shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti padding dalam satu properti tunggal.

Untuk menggunakan padding shorthand Anda cukup menggunakan properti padding. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan padding individu.

#default {
    background-color: orange;
}
#merah {
    background-color: red;
    padding: 10px 20px 30px 40px;
}
#hijau {
    background-color: green;
    padding: 5px 10px 15px;
}
#biru {
    background-color: blue;
    padding: 15px 20px;
}
#kuning {
    background-color: yellow;
    padding: 30px;
}

Jadi, inilah cara kerjanya:

Jika properti padding memiliki empat nilai:

• padding: 10px 20px 30px 40px;
  • padding atas 10px
  • padding kanan 20px
  • padding bawah 30px
  • padding kiri 40px

Jika properti padding memiliki tiga nilai:

• padding: 5px 10px 15px;
  • padding atas 5px
  • padding kanan dan kiri 10px
  • padding bawah 15px

Jika properti padding memiliki dua nilai:

• padding: 15px 20px;
  • padding atas dan bawah 15px
  • padding kanan dan kiri 20px

Jika properti padding memiliki satu nilai:

• padding: 30px
  • keempat sudut padding 30px

Daftar properti padding