Mengenal 5 macam properti Padding pada css

padding properties merupakan properti CSS yang digunakan untuk membuat ruang kosong diantara border dan content pada sebuah elemen. Artinya, padding properties digunakan untuk membuat konten yang ada di elemen tersebut agar tidak menempel pada border.

Mengenal 5 macam properti Padding pada css
Gambar

Apa itu Border?. Border adalah garis tepi yang ada disetiap elemen. Secara default, setiap border pada elemen itu tidak terlihat, jadi Anda harus mengatur border tersebut agar terlihat. Untuk membuat border bisa terlihat Anda bisa menggunakan kode CSS ini 'border: 1px solid black;'.

Daftar isi

1. Padding

menurut saya, properti padding ini adalah yang paling umum digunakan. properti ini bertugas untuk mengatur keempat sisi padding, dengan kata lain, padding mewakili properti lainnya yaitu properti padding-top, padding-right, padding-bottom, dan padding-left.

Properti padding bisa berisi satu nilai hingga empat nilai. jika hanya berisi satu nilai, maka nilai tersebut mengatur keempat sisi padding. Jika berisi empat nilai, maka keempat nilai tersebut mengatur padding secara urut dari padding-top, right, bottom, dan left. Berikut adalah contoh kode untuk properti padding.

contoh kode/program/sintaks css
selector{
    padding: 10px; // satu nilai
    padding: 10px 25px 10px 25px; // empat nilai
}

Contoh diatas adalah properti padding dengan nilai atau value berdasarkan ukuran pixel(px). Anda juga bisa memberi nilai lain seperti initial, auto, dan persen. lebih jelasnya tentang beberapa value yang digunakan sebagai nilai padding bisa anda baca dipembahasan nomor 2 berikut.

2. Value

Value atau Nilai disini adalah Nilai yang bisa digunakan untuk mengisi nilai dari properti padding dan keempat properti padding yang terpisah. berikut adalah table yang berisi beberapa nilai untuk semua properti paddings.

Daftar Tabel untuk Value
NoValueDeskripsi
1px, em, cm, dllmengatur nilai padding berdasarkan ukuran yang dipilih. misal, 10px, 1em, 0.5cm, dll.
2%menentukan nilai padding dengan ukuran dalam bentuk persen. misal 25%, 50%, 35%, dll.
3initialmengembalikan nilai dari properti padding ke default value.
4autosecara otomatis niali untuk properti padding akan diatur oleh browser.

3. Padding-Top

Jika Properti padding beguna untuk mengatur keempat sisi baik sisi atas, kanan, bawah, dan kiri. properti padding-top dibuat khusus hanya untuk mengatur padding sisi atas(top). Value atau nilai untuk padding-top sama seperti table value yang sudah dibahas di nomor dua(2). berikut contohnya.

contoh kode/program/sintaks css
selector{
    padding-top: 10px;
}

4. Padding-Right

Sama seperti namanya yaitu padding-right, properti ini dibuat khusus hanya untuk mengatur padding pada sisi kanan(right). ruang space yang dibuat yaitu disebelah kanan konten dan sebelah kiri border(diantara konten dan border bagian kanan).

Beberapa nilai yang diperlukan untuk properti padding-right bisa Anda baca di pembahasan nomor dua(2) tentang Value. dan berikut dibawah ini adalah contoh kode CSS dengan properti padding-right.

contoh kode/program/sintaks css
selector{
    padding-right: 20px;
}

5. Padding-Bottom

Padding-bottom diciptakan khusus untuk mengatur padding yaitu ruang kosong pada sisi bawah(bottom). Ruang kosong yang dibuat yaitu diantara konten dan border bagian bawah. Nilai yang digunakan untuk padding-bottom sama dengan yang sudah dibahas sebelumnya. Berikut contoh kodenya.

contoh kode/program/sintaks css
selector{
    padding-bottom: 25px;
}

6. Padding-Left

berbeda dengan properti padding lainnya, properti padding-left dapat digunakan untuk mengatur ruang kosong atau padding pada sisi kiri(left). ruang kosong yang dibuat yaitu diantara konten dan border bagian kiri. dan berikut adalah contoh kode CSS dengan padding-left.

contoh kode/program/sintaks css
selector{
    padding-left: 15px;
}