Pengertian Padding dalam Sistem CSS Website

Ilustrasi Membuat Padding dalam Leptop. Foto : Pixabay.com

Pengertian 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.

Ilustrasi Membuat Padding dalam Laptop. Foto: Pixabay.com

Sintaks Padding

Berdasarkan buku CSS Tutorial oleh Muhamad Chotim, berikut sintaks padding yang perlu diketahui sebagai dasar pembuatan padding:

Adapun keterangan dari sintaks padding tersebut adalah:

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:

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:

Ilustrasi Membuat Padding. Sumber: Buku CSS Tutorial oleh Muhamad Chotim

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)