Properti padding CSS digunakan untuk mengatur ruang di sekitar konten elemen yang berada di element ( bawah, kanan atas, kiri )
Section Artikel
Elemen Padding
CSS Padding mempunyai elemen yaitu :
padding-top. Sebagai jarak dalam sebelah atas elemen.padding-right. Sebagai jarak dalam sebelah kanan elemen.padding-bottom. Sebagai jarak dalam sebelah bawah elemen.padding-left. Sebagai jarak dalam sebelah atas kiri.
Semua propeti padding memiliki nilai yaitu :
- length – menentukan padding dalam bentuk px, pt, cm, dll.
- % – menentukan padding dalam bentuk % dari lebar elemen.
- inherit – menentukan padding dari induk tag.
Catatan : Untuk padding ini nilai negatif tidak diperkenankan
Contoh Progam padding berbeda dengan elemen <div> :
<!DOCTYPE html> <html> <head> <!-- ini adalah baris kode css --> <style> div { border: 1px solid black; /*Membuat sebuah border garis*/ background-color: yellow; /*background dalam div akan berwarna kuning*/ padding-top: 40px; /*Mengatur jarak elemen atas*/ padding-right: 20px; /*Mengatur jarak elemen kanan*/ padding-bottom: 30px; /*Mengatur jarak elemen bawah*/ padding-left: 60px; /*Mengatur jarak elemen kiri*/ } </style> <!-- ini adalah akhir baris kode css --> </head> <body> <h1>Individu Side</h1> <div>Paragraf dan seterusnya setelah diubah.</div> </body> </html>
Shorthand Properti
Properti ini untuk mempersingkat kode dengan semua properti jadi 1 properti.
Padding Shorthand mempunyai propeti :
padding-top. Sebagai jarak dalam sebelah atas elemen.padding-right. Sebagai jarak dalam sebelah kanan elemen.padding-bottom. Sebagai jarak dalam sebelah bawah elemen.padding-left. Sebagai jarak dalam sebelah atas kiri.
Jika padding memiliki 4 nilai maka syntax dan penjelasannya :
padding: 27px 52px 77px 102px;
- top padding adalah 27px.
- right padding adalah 52px.
- bottom padding adalah 77px.
- left padding adalah 102px.
Contoh CSS Padding Shorthand
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
border: 1px solid black; /*Membuat sebuah border garis*/
padding: 27px 52px 77px 102px; /*top = 27px right = 52px bawah = 77px kiri 102px*/
background-color: blue; /*background dalam border akan berwarna biru*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>4 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
</body>
</html>Jika memiliki 3 nilai maka syntax dan penjelasannya :
padding: 32px 55px 83px;
- top padding adalah 32px.
- right and left padding adalah 55px.
- bottom padding adalah 83px.
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
border: 1px solid black; /*Membuat sebuah border garis*/
padding: 32px 52px 83px; /*top = 32px right dan left = 52px bottom = 83px*/
background-color: blue; /*background dalam border akan berwarna biru*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>3 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
</body>
</html>Jika memiliki 2 nilai maka syntax dan penjelasannya :
padding: 32px 55px;
- top dan bottom padding adalah 32px.
- right dan left padding adalah 55px.
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
border: 1px solid black; /*Membuat sebuah border garis*/
padding: 32px 52px; /*top dan bottom = 32px right dan left = 52px*/
background-color: blue; /*background dalam border akan berwarna biru*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>2 Value</h1>
<p>Paragraf yang telah di ubah stylenya.</p>
</body>
</html>
Jika memiliki 1 nilai maka syntax dan penjelasannya :
padding: 30px;
- Semua padding 4 adalah 30px.
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
border: 1px solid black; /*Membuat sebuah border garis*/
padding: 30px; /*4 padding = 30px*/
background-color: blue; /*background dalam border akan berwarna biru*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>1 Value</h1>
<div>Paragraf yang telah di ubah stylenya.</div>
</body>
</html>Padding dan Element Width ( box-sizing )
Properti ini digunakan mengatur box model yang artinya bisa membuat box model dalam elemen ini Contoh ini elemen <div> diberi lebar 300px. Namun, lebar sebenarnya dari elemen <div> adalah 360px (300px + 30px bantalan kiri + 30px bantalan kanan) :
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div.coba {
width: 300px; /*lebar = 300px*/
background-color: yellow; /*background dalam div akan menjadi kuning*/
}
div.coba1 {
width: 300px; /*lebar = 300px*/
padding: 30px; /*4 padding = 25px*/
background-color: blue; /*background dalam div akan menjadi biru*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Padding Element Width</h1>
<div class="coba">Paragraf kedua dengan class coba.</div>
<br>
<div class="coba1">Paragraf kedua dengan class coba1.</div>
</body>
</html>Untuk mengatasi lebar pada 300px, tidak peduli jumlah padding, Anda dapat menggunakan properti ukuran kotak ( box-sizing ). Dengan ( box-sizing ) maka akan dibuatkan secara otomatis.
Contoh ini, menggunakan properti ukuran kotak untuk mengatasi 300px :
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div.coba1 {
width: 300px; /*lebar = 300px*/
background-color: yellow; /*background dalam div akan menjadi kuning*/
}
div.coba2 {
width: 300px; /*lebar = 300px*/
padding: 30px; /*4 padding = 30px*/
box-sizing: border-box; /*border-box = akan menjadi border box*/
background-color: lightblue; /*background dalam div akan menjadi biru cerah*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Box Border</h1>
<div class="coba">Paragraf kedua dengan class coba.</div>
<br>
<div class="coba1">Paragraf kedua dengan class coba1.</div>
</body>
</html>Semua CSS Padding Properti
| Properti | Deskripsi |
|---|---|
| padding | Properti untuk mempersingkat 4 properti dalam 1 properti. |
| padding-bottom | Mengatur padding bagian bawah elemen. |
| padding-left | Mengatur padding kiri suatu elemen. |
| padding-right | Mengatur padding kanan suatu elemen. |
| padding-top | Mengatur padding atas suatu elemen. |
