Pengertian Padding dan Fungsinya dalam CSS

Halaman website disusun menggunakan elemen-elemen block yang berbentuk persegi panjang.

Dalam elemen block tersebut, antara tepi elemen dengan konten yang ada didalamnya tidak ada jarak seperti berikut:

Pada tutorial tentang pengertian margin dan fungsinya dalam CSS, saya sudah membahas mengenai karakteristik “box model” sebuah elemen HTML.

Box-model menggambarkan area yang terdapat dalam setiap elemen, yaitu: content area, padding area, border area, dan margin area.

Content area ada pada setiap elemen, sedangkan padding area, border area, dan margin area merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Dengan memahami box model elemen block HTML, kamu bisa lebih mudah mengatur desain halaman website sesuai yang diinginkan.

Pada tutorial kali ini, saya akan membahas mengenai padding area dalam box model elemen.

Pengertian Padding dan Fungsinya

Padding merupakan area di dalam elemen HTML yang memisahkan batas luar elemen dengan content area.

Tanpa adanya padding, batas elemen terluar akan menempel dengan content area.

Dalam desain website, penggunaan padding sangat penting untuk mengatur jarak batas luar elemen dengan elemen lain yang ada di dalamnya.

Padding dibuat dengan menggunakan property CSS padding.

header {
    padding: 0.5em 1em;
}

Sekarang saya akan memberi padding pada contoh di atas menjadi seperti berikut:

Perhatikan contoh di atas! batas elemen terluar sudah tidak menempel lagi dengan konten di dalamnya.

Mengatur Padding pada Sisi Elemen

CSS memiliki property yang bisa digunakan untuk menentukan padding pada setiap sisi elemen:

• padding-top
• padding-right
• padding-bottom
• padding-left

Dan semua property padding tersebut bisa ditentukan dengan nilai berikut:

• length - menentukan padding dalam satuan ukuran px, pt, cm, em, rem, dll.
• % - menentukan padding dalam % dari lebar elemen.
• inherit - menentukan padding berdasarkan lebar margin elemen induk

p {
    padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}

Menggunakan Shorthand Property Padding

Seperti pada penjelasan sebelumnya, kamu bisa mengatur setiap sisi elemen dengan nilai padding yang berbeda.

Agar tidak terlalu panjang kode CSS-nya, kamu bisa menggunakan shorthand property padding yang menentukan sisi atas, kanan, bawah, dan kiri.

Pada contoh kode di atas, kamu bisa menyingkatnya menjadi:

p {
    padding: 0.5rem 1rem 1.5rem 2rem;
}

Jika properti padding memiliki 4 nilai:

• padding: 1rem 0.5rem 2rem 1.5rem;

  • padding atas adalah 1rem

  • padding kanan adalah 0.5rem

  • padding bawah adalah 2rem

  • padding kiri adalah 1.5rem

    Properti padding dengan 4 nilai

Jika properti padding memiliki 3 nilai;

• padding: 1rem 2rem 1.5rem;

  • padding atas adalah 1rem

  • padding kanan adalah 2rem

  • padding bawah adalah 1.5rem

  • padding kiri adalah 2rem

    Properti padding dengan 3 nilai

Jika properti padding memiliki 2 nilai;

• padding: 1rem 2rem;

  • padding atas adalah 1rem

  • padding kanan adalah 2rem

  • padding bawah adalah 1rem

  • padding kiri adalah 2rem

    Properti padding dengan 2 nilai

Jika properti padding memiliki 1 nilai;

• padding: 1rem;

  • padding atas adalah 1rem

  • padding kanan adalah 1rem

  • padding bawah adalah 1rem

  • padding kiri adalah 1rem

    Properti padding dengan 1 nilai