Pengertian Padding dalam Sistem CSS Website
Menyajikan beragam informasi terbaru, terkini dan mengedukasi.
·waktu baca 3 menit
Tulisan dari Kabar Harian tidak mewakili pandangan dari redaksi kumparan
PerbesarPengertian padding adalah sebutan untuk spasi atau ruang di antara konten dan batas pada Cascading Style Sheet (CSS) dalam website.
CSS ini berfungsi untuk mengatur tampilan elemen yang tertulis dan juga memisahkan konten dari tampilan visual dalam sebuah website.
Pengertian Padding
Mengutip dari buku Diktat CCS oleh L. Erawan, pengertian padding adalah sebuah area kosong yang berada di antara batas dan konten dari elemen HyperText Markup Language (HTML).
Berbeda dengan margin yang tidak memiliki warna, unsur warna dari Padding didapatkan dari nilai background element HTML yang bersangkutan.
Perlu diketahui bahwa posisi dari margin, border, dan padding berada di luar dari konten, sehingga nilai yang diberikan untuk ketiganya akan berpengaruh menambah luas area dari elemen HTML.
Padding tak memiliki unsur warna, tetapi keberadaannya dipengaruhi oleh unsur warna dari latar belakang suatu elemen yang dinaunginya.
Tiap elemen HTML memiliki empat sisi padding, yaitu padding atas, padding kanan, padding bawah, dan padding kiri.
Sintaks Padding
Berdasarkan buku CSS Tutorial oleh Muhamad Chotim, berikut sintaks padding yang perlu diketahui sebagai dasar pembuatan padding:
padding-top : length | percent ;
padding-right : length | percent ;
padding-bottom : length | percent ;
padding-left : length | percent ;
Adapun keterangan dari sintaks padding tersebut adalah:
Value default untuk masing-masing properti adalah “0”
Value yang bisa digunakan untuk mengatur nilai margin bisa berupa nilai panjang dan persen.
Value berupa panjang, bisa menggunakan satuan px, em, atau cm. Namun, yang umum digunakan adalah menggunakan satuan px (pixel).
Value berupa persen, akan menghasilkan nilai margin yang dihitung dari persentasi area yang berada di sekelilingnya.
Meringkas Penggunaan Property Padding
Supaya penulisan nilai Padding sebuah elemen HTML lebih ringkas, bisa digunakan properti padding. Berikut contoh sintaksnya:
padding:< padding-top> < padding-right> <padding-bottom> <padding-left>;
Berikut ini adalah keterangan dari sintaks di atas:
Properti padding digunakan untuk menentukan nilai padding dari keempat sisi elemen HTML.
Value dari properti ini bisa terdiri dari satu sampai empat nilai, yang penggunaannya sama dengan Property Margin dan Property Border.
Contoh Pembuatan Padding
Berikut adalah contoh pembuatan padding yang dikutip dari buku CSS Tutorial oleh Muhamad Chotim.
Editlah bagian CSS untuk Selector “.artikel” pada contoh sebelumnya sehingga menjadi seperti berikut ini:
.artikel {
background : #CCF ;
margin : 0 20px ;
border-style : dashed dotted ;
border-width : 2 px;
border-color : #FFF;
padding : 5px 15px;
Hasilnya akan terlihat seperti pada gambar berikut ini:
Berikut penjelasan dari gambar di atas:
Pada gambar d terlihat bahwa di antara Content (teks) dan Border terdapat jarak (Padding). Padding bagian atas dan bawah sebesar 5px, dan Padding bagian kanan dan kiri sebesar 15px.
Dalam mendesain sebuah halaman web, penggunaan nilai Padding sangat berpengaruh dalam hal kenyamanan pengguna saat membaca artikel yang kita sajikan.
Sebuah artikel yang diberikan jarak dengan garis tepi akan lebih nyaman dibaca daripada artikel yang posisinya menempel dengan garis tepinya.
Pertimbangkan besaran nilai Padding dengan konsep desain web yang diterapkan, sehingga akan menghasilkan sebuah tampilan halaman web yang elegan dan nyaman untuk dibaca.
(FNS)