Padding

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 34 dari 76.

Dalam CSS, padding adalah ruang antara konten elemen dan bordernya. Padding digunakan untuk menciptakan ruang kosong visual di sekitar konten agar lebih mudah dibaca dan tampak lebih menarik. Kamu dapat mengatur padding pada keempat sisi elemen (atas, kanan, bawah, dan kiri) secara terpisah atau menggunakan notasi singkat.

Berikut sintaks dasar untuk menggunakan property padding:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: Padding di sisi atas elemen.
padding-right: Padding di sisi kanan elemen.
padding-bottom: Padding di sisi bawah elemen.

padding-left: Padding di sisi kiri elemen.
value: Nilai padding yang diinginkan, yang dapat ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya.

Kamu juga bisa menggunakan notasi singkat untuk mengatur padding pada keempat sisi sekaligus, misalnya:

p {
    padding: 20px; /* Menerapkan padding yang sama pada keempat sisi */
}

div {
    padding: 10px 25px; /* Mengatur padding atas dan bawah menjadi 10px, serta padding kiri dan kanan menjadi 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Mengatur padding setiap sisi secara terpisah */
}

Dalam contoh ini, semua elemen <p> (paragraf) memiliki padding sebesar 20px di semua sisi, semua elemen <div> memiliki padding atas dan bawah sebesar 10px serta padding kiri dan kanan sebesar 25px, dan semua elemen dengan class button memiliki padding atas sebesar 15px, padding kanan sebesar 30px, padding bawah sebesar 10px, serta padding kiri sebesar 5px.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua heading. Tugasmu adalah menggunakan property padding untuk menambahkan jarak di sekitar konten elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur padding menjadi 20px di semua sisi.
Tulis aturan CSS yang menargetkan elemen <h2>. Atur padding atas dan bawah menjadi 10px, serta padding kiri dan kanan menjadi 30px.

Coba sendiri

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>