Bila Sahabat Qwords sedang menjelajahi dunia CSS, kamu pasti sudah tidak asing lagi dengan yang namanya istilah Padding.
Tapi sebenarnya, apa itu Padding dalam CSS?
Yuk, kita kupas tentang apa itu Padding, fungsi Padding, hingga ragam contoh Padding dalam ulasan berikut ini!
Apa Itu Padding?
Padding adalah ruang atau jarak di antara konten suatu elemen dengan batas (border) elemen tersebut. Dengan kata lain, Padding menciptakan area kosong di dalam elemen yang mengelilingi konten dan memisahkannya dari border.
Padding bukan sekadar ruang kosong saja, tapi juga ruang tambahan yang memengaruhi estetika dan keterbacaan tampilan halaman web. Penambahan Padding dalam pembangunan website akan memengaruhi ukuran keseluruhan elemen.
Secara sederhana, pengertian Padding adalah ruang di dalam sebuah elemen yang menjaga konten agar tidak terlalu menempel ke tepi, sehingga halaman tampil lebih bersih dan mudah dibaca.
Fungsi dan Manfaat Padding
Ada sejumlah manfaat Padding untuk halaman website yang sedang kamu bangun atau kelola.
- Meningkatkan keterbacaan konten, karena Padding mampu memberi ruang antara teks dan border agar tidak terasa sesak.
- Meningkatkan estetika visual, sehingga membuat tampilan lebih rapi dan profesional.
- Mencegah konten terlalu rapat dengan border, sehingga mampu menjaga tampilan konten agar tidak berada sangat dekat dengan garis pembatas.
- Mengatur tata letak responsif. Padding mampu membantu menjaga tampilan konten agar tetap nyaman di berbagai ukuran layar.
Sintaks dan Cara Penulisan Padding
Dalam memanfaatkan Padding untuk pengebagan halaman websitemu. Berikut ini cara menggunkan Padding untuk kamu yang sedang belajar CSS.
1. Pilih Elemen
Langkah pertama adalah menentukan elemen HTML yang ingin diubah. Kemudian, buka berkas CSS.
2. Buka CSS
Setelah membuka berkas CSS, kemudian hubungkan dengan berkas HTML-mu.
3. Tulis Selector untuk Elemen
Tulis selector untuk elemen halaman website Sahabat Qwords.
4. Pilih Properti Padding
Pilih properti Padding. Sahabat Qwords bisa memilih properti Padding (yang ada di ulasan setelah ini).
5. Simpan dan Refresh Halaman
Setelah ditambahkan kode Padding, kamu bisa menyimpan berkas CSS tersebut dan memuat ulang halaman situsmu untuk melihat perubahannya.
Ada sejumlah sintaks dan cara penulisan Padding yang bisa kamu tambah atau pilih sesuai langkah keempat yang sudah diulas sebelumnya.
1. Sintaks Umum (Padding Shorthand)
Kamu bisa memberikan Padding sekaligus ke empat sisi dengan properti Padding:<nilai>;.
- Satu nilai saja (misalnya Padding:20px;): diterapkan ke semua sisi.
- Dua nilai (Padding:10px 20px;): nilai pertama untuk atas & bawah, nilai kedua untuk kiri & kanan.
- Tiga nilai (Padding:10px 20px 30px;): atas, kiri-kanan, bawah.
- Empat nilai (Padding:5px 10px 15px 20px;): atas, kanan, bawah, kiri.
2. Padding per Sisi
- Padding-top adalah properti untuk mengatur ruang di bagian atas konten.
- Padding-right adalah untuk sisi kanan elemen.
- Padding-bottom adalah untuk sisi bawah elemen.
- Padding-left adalah untuk sisi kiri elemen.
Contoh penggunaan:
.element {
Padding-top: 10px;
Padding-right: 15px;
Padding-bottom: 20px;
Padding-left: 25px;
}
Atau dengan shorthand:
.element {
Padding: 10px 15px 20px 25px; /* atas, kanan, bawah, kiri */
}
Padding dalam Konteks CSS Box Model
Dalam CSS, setiap elemen diibaratkan sebagai sebuah kotak (box). Kotak tersebut memiliki lapisan konten, border, Padding, dan margin. Padding akan ada di antara konten dan border, serta bertugas untuk menambah ruang di dalam elemen.
Contohnya:
.myBox {
width: 200px;
Padding: 10px;
border: 5px solid black;
}
Tanpa menggunakan box-sizing: border-box;, total lebar box menjadi 200px (konten) + 10px kiri + 10px kanan + border di kedua sisi, sehingga lebih lebar dari lebar yang ditetapkan.
Contoh Praktis Penggunaan Padding
Misal Sahabat Qwords punya elemen HTML, kamu bisa menyontoh cara praktis penggunaan Padding berikut ini:
<div class=”kotak”>Halo, ini isi elemen kotak.</div>
CSS-nya:
.kotak {
border: 2px solid #333;
Padding: 20px; /* ruang di semua sisi */
}
Jika ingin Padding berbeda tiap sisi:
.kotak {
border: 2px solid #333;
Padding: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */
}
Atau memakai cara panjang:
.kotak {
border: 2px solid #333;
Padding-top: 10px;
Padding-right: 20px;
Padding-bottom: 30px;
Padding-left: 40px;
}
Makin Paham Tentang Padding dan Cara Menggunakannya?
Sejatinya Padding adalah ruang atau jarak di antara konten suatu elemen dengan batas (border) elemen tersebut. Dengan kata lain, Padding menciptakan area kosong di dalam elemen yang mengelilingi konten dan memisahkannya dari border.
Ada banyak fungsi dari penggunaan Padding dalam halaman websitemu. Mulai dari meningkatkan estetika visual, mencegah konten terlalu rapat dengan border, dan mengatur tata letak responsif.
Sebagai pendukung tampilan halaman situsmu, Padding menjadi alat bermanfaat supaya pengunjung atau pengguna websitemu makin betah berlama-lama di dalam website milikmu.
Semoga artikel ini membantu Sahabat Qwords memahami cara menata ruang di dalam elemen CSS lebih baik ya.
Selamat bereksperimen dan semangat terus belajar CSS!
