Padding
Padding adalah jarak antara border dengan elemen konten.
Padding akan memberi jarak didalam border pada sekeliling elemen konten.
Warna background padding akan mengikuti warna dari background konten.
Dengan menggunakan CSS anda bisa mengatur padding pada semua sisi elemen (atas, kanan, bawah dan kiri) dan nilai dari setiap sisi bisa anda atur berbeda.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Padding</title>
<style>
p{
border: solid;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2>Padding</h2>
<p>
Ini adalah paragraf dengan padding atas 10px, kanan 20px, bawah 10px dan kiri 50px.
</p>
</body>
</html>
Anda bisa menggunakan nilai padding dalam bentuk in, px, pt, cm dan persen (%).
Mengatur Padding dengan Satu Baris Kode
Selain mengatur nilai disetiap sisinya anda juga dapat mengatur padding hanya dengan menggunakan satu properti (padding).
Dengan memasukan satu nilai pada properti padding akan mengatur semua sisi padding dengan nilai yang sama.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Padding</title>
<style>
p{
border: solid;
padding: 5%;
}
</style>
</head>
<body>
<h2>Padding</h2>
<p>
Ini adalah paragraf dengan nilai semua sisi padding sama yaitu 5%.
</p>
</body>
</html>
Memasukan tiga nilai pada properti padding "padding: 20px 10px 20px;" akan mengatur nilai padding pada sisi atas (20px), kanan kiri (10px) dan bawah (20px).
Memasukkan dua nilai pada properti padding "padding: 20px 10px;" akan mengatur nilai padding pada sisi atas bawah (20px) dan kanan kiri (10px).
Baca juga: Tutorial CSS - Mengatur Margin
EmoticonEmoticon