Padding digunakan untuk membuat ruang di sekitar elemen, ruang ini berada di dalam batas/border yang diberikan pada elemen HTML tersebut. Perbedaan padding dengan margin adalah lokasi ruangan yang disediakan, margin membuat ruang di luar batas/border elemen, sedangkan padding membuat ruang di dalam batas/border elemen.
CSS Padding
Properti CSS padding digunakan untuk membuat ruang di sekitar elemen.
Dengan menggunakan CSS, padding dapat diatur sehingga lebar ruang di sekitar elemen dapat ditentukan. Berikut adalah properti-properti untuk mengubah padding di setiap sisi elemen (atas, kanan, bawah, dan kiri).
Mengatur Padding Untuk Setiap Sisi
CSS memiliki properti untuk menentukan padding di setiap sisi elemen:
padding-toppadding-rightpadding-bottompadding-left
Semua properti padding dapat memiliki nilai berikut:
- length – menentukan padding dalam px, pt, cm, dll.
- % – menentukan padding dalam % dari lebar elemen yang memuatnya
- inherit- menentukan bahwa padding harus diwariskan dari elemen induk
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding yang berbeda untuk keempat sisi elemen <div>:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Menggunakan properti padding untuk masing-masing sisi</h2>
<div>Elemen div ini memiliki padding atas 50px, padding kanan 30px, padding bawah 50px dan padding kiri 80px.</div>
</body></html>Properti Singkat/Gabungan Padding
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti untuk mengatur padding dalam satu properti.
Properti padding adalah properti singkat/gabungan untuk masing-masing properti pengaturan padding berikut:
padding-toppadding-rightpadding-bottompadding-left
Aturannya adalah sebagai berikut.
Jika properti padding memiliki empat nilai:
- padding: 25px 50px 75px 100px;
- padding atas berukuran 25px
- padding kanan berukuran 50px
- padding bawah berukuran 75px
- padding kiri berukuran 100px
Contoh
Penggunaan properti singkat untuk padding dengan empat nilai:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Properti singkat/gabungan padding - 4 nilai</h2>
<div>Elemen div ini memiliki padding atas 25px, padding kanan 50px, padding bawah 75px dan padding kiri 100px.</div>
</body></html>Jika properti padding memiliki tiga nilai:
- padding: 25px 50px 75px;
- padding atas berukuran 25px
- padding kanan dan kiri berukuran 50px
- padding bawah berukuran 75px
Contoh
Penggunaan properti singkat untuk padding dengan tiga nilai:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Properti singkat/gabungan padding - 3 nilai</h2>
<div>Elemen div ini memiliki padding atas 25px, padding kanan dan kiri 50px dan padding bawah 75px.</div>
</body></html>Jika properti padding memiliki dua nilai:
- padding: 25px 50px;
- Padding atas dan bawah berukuran 25px
- Padding kanan dan kiri berukuran 50px
Contoh
Penggunaan properti singkat untuk padding dengan dua nilai:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Properti singkat/gabungan padding - 2 nilai</h2>
<div>Elemen div ini memiliki padding atas dan bawah 25px dan padding kanan dan kiri 50px.</div>
</body></html>Jika properti padding memiliki satu nilai:
- padding: 25px;
- keempat padding (atas, bawah, kanan, kiri) berukuran 25px
Contoh
Penggunaan properti singkat untuk padding dengan satu nilai:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Properti singkat/gabungan padding - 1 nilai</h2>
<div>Elemen div ini memiliki padding atas, bawah, kiri dan kanan 25 piksel.</div>
</body></html>Padding dan Lebar Elemen
Properti CSS width menentukan lebar area konten elemen. Area konten adalah bagian di dalam padding, border, dan margin elemen.
Jadi, jika suatu elemen memiliki lebar tertentu, padding yang ditambahkan ke elemen tersebut akan ditambahkan ke total lebar elemen. Ini sering kali menghasilkan tampilan yang tidak diinginkan.
Contoh
Di sini, elemen <div> diberi lebar 300px. Namun, lebar elemen <div> akan berukuran 350px (300px + 25px padding kiri + 25px padding kanan):
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding dan lebar elemen</h2>
<div class="ex1">Div ini lebarnya 300px.</div>
<br>
<div class="ex2">Lebar div ini adalah 350px, meskipun dalam CSS didefinisikan sebagai 300px.</div>
</body></html>Untuk menjaga lebar tetap 300px, berapa pun nilai paddingnya, maka dapat digunakan properti box-sizing. Sehingga tidak akan mengubah ukuran lebar yang telah ditentukan. Tapi dengan menggunakan properti box-sizing maka apabila nilai padding ditambahkan, maka ruang di dalam konten yang akan berkurang.
Contoh
Penggunaan properti box-sizing untuk menjaga lebar tetap 300 piksel, berapa pun nilai paddingnya:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding dan lebar elemen - menggunakan properti box-sizing</h2>
<div class="ex1">Div ini lebarnya 300px.</div>
<br>
<div class="ex2">Lebar dari div ini tetap 300px, terlepas dari total padding kiri dan kanan 50px, karena properti box-sizing: border-box.
</div>
</body></html>Referensi Semua Properti Padding CSS
Properti padding CSS
Contoh
Atur padding untuk keempat sisi sebuah elemen <p> menjadi 35 piksel:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px;
}
p.ex2 {
border: 1px solid red;
margin: 35px;
}
</style>
</head>
<body>
<h1>Properti padding</h1>
<p class="ex1">Paragraf ini memiliki padding 35 piksel di keempat sisinya.</p>
<p class="ex2">Paragraf ini tidak memiliki padding yang ditentukan, tetapi memiliki margin 35 piksel di keempat sisinya.</p>
<p><strong>Catatan:</strong> Padding menciptakan ruang ekstra di dalam elemen, sedangkan margin menciptakan ruang ekstra di sekitar elemen!</p>
</body></html>Definisi dan Penggunaan
Padding adalah ruang antara konten dan border.
Properti padding adalah properti singkatan untuk:
- padding-top
- padding-right
- padding-bottom
- padding-left
Catatan: Padding membuat ruang ekstra di dalam batas/border elemen, sedangkan margin membuat ruang ekstra di luar batas/border elemen.
Properti ini dapat memiliki satu hingga empat nilai.
Jika properti padding memiliki empat nilai:
- padding:10px 5px 15px 20px;
- padding atas berukuran 10px
- padding kanan berukuran 5px
- padding bawah berukuran 15px
- padding kiri berukuran 20px
Jika properti padding memiliki tiga nilai:
- padding:10px 5px 15px;
- padding atas berukuran 10px
- padding kanan dan kiri berukuran 5px
- padding bawah berukuran 15 piksel
Jika properti padding memiliki dua nilai:
- padding:10px 5px;
- padding atas dan bawah berukuran 10px
- padding kanan dan kiri berukuran 5px
Jika properti padding memiliki satu nilai:
- padding:10px;
- keempat padding (atas, bawah, kanan, kiri) berukuran 10px
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding untuk elemen <p> menjadi 35px untuk atas dan bawah, dan 70px untuk kanan dan kiri:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px 70px;
}
</style>
</head>
<body>
<h1>Properti padding </h1>
<p class="ex1">Paragraf ini memiliki padding 35 piksel untuk atas dan bawah dan padding 70 piksel untuk kanan dan kiri.</p>
<p><strong>Catatan:</strong> Padding menciptakan ruang ekstra di dalam elemen, sedangkan margin menciptakan ruang ekstra di sekitar elemen!</p>
</body></html>Contoh
Menetapkan padding untuk elemen <p> menjadi 35px untuk bagian atas, 70px untuk bagian kanan dan kiri, dan 50px untuk bagian bawah:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px 70px 50px;
}
</style>
</head>
<body>
<h1>Properti padding </h1>
<p class="ex1">Paragraf ini memiliki padding 35 piksel untuk bagian atas, padding 70 piksel untuk kanan dan kiri dan padding 50 piksel untuk bagian bawah.</p>
<p><strong>Catatan:</strong> Padding menciptakan ruang ekstra di dalam elemen, sedangkan margin menciptakan ruang ekstra di sekitar elemen!</p>
</body></html>Contoh
Menetapkan padding untuk elemen <p> ke 35px untuk bagian atas, 70px untuk bagian kanan, 50px untuk bagian bawah, dan 90px untuk bagian kiri:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px 70px 50px 90px;
}
</style>
</head>
<body>
<h1>Properti padding </h1>
<p class="ex1">Paragraf ini memiliki padding 35 piksel untuk bagian atas, padding 70 piksel untuk kanan, padding 50 piksel untuk bawah dan padding 90 piksel untuk kiri.</p>
<p><strong>Catatan:</strong> Padding menciptakan ruang ekstra di dalam elemen, sedangkan margin menciptakan ruang ekstra di sekitar elemen!</p>
</body></html>Properti CSS padding-bottom
Contoh
Menetapkan padding bawah untuk elemen <p> menjadi 25px :
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-bottom: 25px;
}
</style>
</head>
<body>
<h1>Properti padding-bottom</h1>
<p class="ex1">Paragraf dengan padding bawah 25 piksel.</p>
</body></html>Definisi dan Penggunaan
Properti padding-bottom mengubah padding bawah dan memberi jarak dari suatu elemen.
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding bawah untuk elemen <p> hingga 10% dari lebar elemen yang memuatnya:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-bottom: 10%;
}
</style>
</head>
<body>
<h1>Properti padding-bottom</h1>
<p class="ex1">Sebuah paragraf dengan padding bawah 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
</body></html>Contoh
Atur padding bawah untuk elemen <p> ke 2 em:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-bottom: 2em;
}
</style>
</head>
<body>
<h1>Properti padding-bottom</h1>
<p class="ex1">Paragraf dengan padding bawah 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
</body></html>Properti CSS padding-left
Contoh
Menetapkan padding kiri untuk elemen <p> menjadi 50 px:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-left: 50px;
}
</style>
</head>
<body>
<h1>Properti padding-left</h1>
<p class="ex1">Paragraf dengan padding kiri 50 piksel.</p>
</body></html>Definisi dan Penggunaan
Properti padding-left mengubah padding kiri dan memberi jarak dari suatu elemen.
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding kiri untuk elemen <p> hingga 10% dari lebar elemen yang memuatnya:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-left: 10%;
}
</style>
</head>
<body>
<h1>Properti padding-left</h1>
<p class="ex1">Paragraf dengan padding kiri 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
</body></html>Contoh
Menetapkan padding kiri untuk elemen <p> ke 2 em:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-left: 2em;
}
</style>
</head>
<body>
<h1>Properti padding-left</h1>
<p class="ex1">Paragraf dengan padding kiri 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
</body></html>Properti CSS padding-right
Contoh
Menetapkan padding kanan untuk elemen <p> menjadi 150 px:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-right: 150px;
}
</style>
</head>
<body>
<h1>Properti padding-right</h1>
<p class="ex1">Paragraf dengan padding kanan 150 piksel.</p>
</body></html>Definisi dan Penggunaan
Properti padding-right mengubah padding kanan dan memberi jarak dari suatu elemen.
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding kanan untuk elemen <p> hingga 50% dari lebar elemen yang memuatnya:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-right: 50%;
}
</style>
</head>
<body>
<h1>Properti padding-right</h1>
<p class="ex1">Sebuah paragraf dengan padding kiri 50%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
</body></html>Contoh
Menetapkan padding kanan untuk elemen <p> ke 2 em:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-right: 2em;
}
</style>
</head>
<body>
<h1>Properti padding-right</h1>
<p class="ex1">Paragraf dengan padding kanan 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
</body></html>Properti CSS padding-top
Contoh
Menetapkan padding atas untuk elemen <p> menjadi 25 px:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 25px;
}
</style>
</head>
<body>
<h1>Properti padding-top</h1>
<p class="ex1">Paragraf dengan padding atas 25 piksel.</p>
</body></html>Definisi dan Penggunaan
Properti padding-top mengubah padding atas dan memberi jarak dari suatu elemen.
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Menetapkan padding atas untuk elemen <p> hingga 10% dari lebar elemen yang memuatnya:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 10%;
}
</style>
</head>
<body>
<h1>Properti padding-top</h1>
<p class="ex1">Sebuah paragraf dengan padding atas 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
</body></html>Contoh
Menetapkan padding atas untuk elemen <p> ke 2 em:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 2em;
}
</style>
</head>
<body>
<h1>Properti padding-top</h1>
<p class="ex1">Sebuah paragraf dengan padding atas 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
</body></html>Tutorial sebelumnya : Margin CSS
Tutorial setelahnya : Menentukan Lebar dan Tinggi Elemen Dengan CSS
Semua Tutorial CSS : Tutorial CSS