CSS Padding
padding digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian dalam (Jarak tepi di dalam sebuah element). padding memiliki 4 individual property yang dapat digunakan secara terpisah sendiri-sendiri, yaitu: padding-top, padding-right, padding-bottom dan padding-left. Jadi, padding adalah shorthand (kependekan) untuk mendeklarasikan keempat penjabaran tersebut secara serentak (sekaligus) dalam satu baris.
Dengan padding, kita bisa mengatur posisi elemen agar memiliki ruang lebih luas atau lebih sempit dalam lingkup konten elemen itu sendiri.
Syntax
Penggunaan Sintaksis padding
padding: length | percentage
Values
Nilai CSS padding
CSS padding memiliki values (nilai/isian) satu, dua, tiga dan empat deret nilai menggunakan unit sebagai berikut:
Menentukan batas tepi (padding) dalam satuan: px, mm, cm, in, pt, pc (Absolute length units); em, ex, ch, rem (Relative length units).
Menentukan batas tepi (padding) dengan hitungan persentase berdasarkan lebar konten elemen.
Negative value (nilai negatif) Tidak diperbolehkan. Contoh TIDAK BENAR: padding: -5px
Example
Contoh CSS padding
p {border: 1px solid #ccc;}
/* paragraf pertama tidak memiliki padding */
p:first-child{padding:0}
/* paragraf kedua yang memiliki padding */
p {
padding: 20px;
}
Paragraf pertama tidak memiliki padding, paragraf kedua memiliki padding 20px disemua sisi. Hasilnya bisa dilihat pada link demo Code Editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo CSS padding - apacara.com</title>
<style>
p {border: 1px solid #ccc;}
p:first-child{padding:0}
/* paragraf kedua yang memiliki padding */
p {
padding: 20px;
}
</style>
</head>
<body>
<section>
<p>
Paragraf ini tidak memiliki padding
</p>
<p>
Paragraf ini memiliki padding, sehingga memiliki jarak tepi di dalam garis
</p>
</section>
</body>
</html>
Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.
Contoh:
Dengan 2 deret nilai (value)
padding: vertical horizontal = padding: atas&bawah kiri&kanan p {
padding: 5px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki padding (Jarak tepi didalam elemen) dimulai dari kiri yaitu: 5px untuk jarak tepi atas dan tepi bawah (digabung jadi satu), 20px untuk jarak tepi kiri dan tepi kanan (digabung jadi satu).
Jadi, jika ditulis 2 nilai, maka urutan polanya: atas dan bawah 5px ? kiri dan kanan 20px
Contoh:
Dengan 3 deret nilai (value)
padding: top horizontal bottom = padding: atas kiri&kanan bawah p {
padding: 5px 15px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki padding (Jarak tepi didalam elemen) dimulai dari kiri yaitu: 5px untuk jarak tepi atas, 15px untuk jarak tepi kiri dan tepi kanan (digabung jadi satu), 20px untuk jarak tepi bawah.
Jadi, jika ditulis 3 nilai, maka urutan polanya: atas 5px ? kiri dan kanan 15px ? bawah 20px
Contoh:
Dengan 4 deret nilai (value)
padding: top right bottom left = padding: atas kanan bawah kiri p {
padding: 5px 10px 15px 20px;
}
Apabila diterjemahkan kode diatas memiliki arti sebagai berikut:
Semua p (paragraf) memiliki padding (Jarak tepi didalam elemen) dimulai dari kiri yaitu: 5px untuk jarak tepi atas, 10px untuk jarak tepi kanan, 15px untuk jarak tepi bawah, 20px untuk jarak tepi kiri.
Jadi, jika ditulis 4 nilai, maka urutan polanya: atas 5px ? kanan 10px ? bawah 15px ? kiri 20px
SHARE