Belajar CSS Part 8 - Padding pada CSS

Padding

Padding merupakan sisi dalam dari sebuah elemen. Sama halnya dengan margin, kita juga bisa mengatur jarak pada sisi sebuah elemen. Padding hanya digunakan untuk mengatur jarak pada sisi dalamnya saja.

Properti Padding

Properti padding digunakan untuk menghasilkan ruang di sekitar konten pada sebuah elemen, tepatnya di dalam dari setiap border yang sudah ditetapkan.
Contoh

div {
    padding: 70px;
    border: 1px solid #FF0000;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<title>Padding</title>
</head>
<body>

<div>Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px.</div>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Sama halnya dengan margin, padding juga memiliki empat sisi, yaitu:

padding-top
padding-right
padding-bottom
padding-left

Semua properti padding memiliki nilai (value) berikut:

length - menentukan nilai padding dalam px, pt, cm, dll
% - menentukan padding dalam persen berdasarkan lebar blok elemen
inherit - menetapkan padding harus mengikuti elemen induk (atau elemen sebelumnya)

Catatan: Dalam padding, nilai negatif tidak diperbolehkan.

Di bawah ini adalah contoh menetapkan padding yang berbeda untuk keempat sisi dari elemen <div>:

Contoh

div {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penggunaan properti padding</h2>
<div>Elemen div ini memiliki padding pada sisi atas 50px, padding pada sisi kanan 30px, padding pada sisi bawah 50px, dan padding pada sisi kiri 80px.</div>

</body>
</html>

Hasilnya:

Mempersingkat Pengkodean pada Padding

Untuk mempersingkat pengkodean, kita harus menentukan semua properti padding dalam satu properti.

Properti padding digunakan untuk menyingkat properti berikut:

padding-top
padding-right
padding-bottom
padding-left

Berikut adalah adalah cara kerjanya:

Apabila properti padding memiliki empat nilai:

padding: 25px 50px 75px 100px;

padding sisi atas adalah 25px
Padding sisi tepat adalah 50px
Padding sisi bawah adalah 75px
Padding sisi kiri adalah 100px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px 75px 100px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 4 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas, 50px pada sisi kanan, 75px pada sisi bawah, dan 100px pada sisi kiri.</div>

</body>
</html>

Hasilnya:

Apabila properti padding memiliki tiga nilai:

padding: 25px 50px 75px;

padding sisi atas adalah 25px
paddings sisi kanan dan kiri adalah 50px
Padding sisi bawah adalah 75px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px 75px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 3 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas, 50px pada sisi kanan dan kiri, 75px pada sisi bawah.</div>

</body>
</html>

Hasilnya:

Apaila properti padding memiliki dua nilai:

padding: 25px 50px;

padding sisi atas dan bawah yang 25px
padding sisi kanan dan kiri adalah 50px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 2 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas dan bawah, dan 50px pada sisi kanan dan kiri.</div>

</body>
</html>

Hasilnya:

Apabila properti padding memiliki satu nilai:

padding: 25px;

keempat sisi padding adalah 25px

Contoh

div {
    border: 1px solid black;
    padding: 25px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 1 nilai</h2>
<div>Elemen div ini memiliki padding 25px untuk keempat sisinya</div>

</body>
</html>

Hasilnya:

Catatan: Apabila kita ingin memberikan ukuran padding yang sama pada keempat sisi, maka cukup hanya dengan menuliskan padding 1 nilai saja seperti di atas.

Pada tabel di bawah ini adalah semua properti CSS padding:

Properti	Deskripsi
padding	Sebuah properti singkatan untuk mengatur semua properti padding dalam satu deklarasi
padding-top	Menentukan padding pada sisi atas konten dalam sebuah elemen
padding-right	Menentukan padding pada sisi kanan konten dalam sebuah elemen
padding-bottom	Menentukan padding pada sisi bawah konten dalam sebuah elemen
padding-left	Menentukan padding pada sisi kiri konten dalam sebuah elemen

Demikian pembahasan mengenai cara mengatur padding atau jarak di sekitar konten pada sebuah elemen.
Semoga bermanfaat!

Sumber: https://www.w3schools.com