1. Pengertian Margin dan Padding

Dalam CSS, margin dan padding digunakan untuk mengatur jarak pada sebuah elemen.

Perbedaannya sederhana:

• Margin → jarak di luar elemen
• Padding → jarak di dalam elemen

Gambaran sederhananya:

        MARGIN
┌─────────────────────────────┐
│                             │
│     ┌───────────────────┐   │
│     │     PADDING       │   │
│     │  ┌─────────────┐  │   │
│     │  │   CONTENT   │  │   │
│     │  └─────────────┘  │   │
│     └───────────────────┘   │
│                             │
└─────────────────────────────┘

---

2. Margin

Margin digunakan untuk memberikan jarak antara sebuah elemen dengan elemen lainnya.

Contoh:

.box {
    margin: 20px;
}

Artinya, elemen .box memiliki jarak 20px di luar semua sisi.

Contoh HTML

<div class="box">Kotak Pertama</div>
<div class="box">Kotak Kedua</div>

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 20px;
}

---

3. Margin Berdasarkan Sisi

Margin dapat diatur secara terpisah.

.box {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 50px;
}

Artinya:

Properti	Fungsi
margin-top	Jarak bagian atas
margin-right	Jarak bagian kanan
margin-bottom	Jarak bagian bawah
margin-left	Jarak bagian kiri

---

4. Shorthand Margin

Kita juga bisa menulis margin lebih singkat.

Satu nilai

margin: 20px;

Semua sisi = 20px

Dua nilai

margin: 10px 20px;

Artinya:

Atas & bawah  = 10px
Kiri & kanan  = 20px

Empat nilai

margin: 10px 20px 30px 40px;

Urutannya:

        10px
          ↑
40px ← ELEMENT → 20px
          ↓
        30px

Urutan:

top → right → bottom → left

atau mudah diingat:

TRBL

---

5. Padding

Padding digunakan untuk memberikan jarak antara isi/content dengan batas elemen.

Contoh:

.box {
    padding: 20px;
}

Artinya isi di dalam .box mempunyai jarak 20px dari tepi kotak.

Contoh:

<div class="box">
    Belajar CSS
</div>

.box {
    width: 200px;
    background-color: lightblue;
    padding: 20px;
}

Tanpa padding:

┌────────────────────┐
│Belajar CSS         │
└────────────────────┘

Dengan padding:

┌────────────────────┐
│                    │
│   Belajar CSS      │
│                    │
└────────────────────┘

---

6. Padding Berdasarkan Sisi

Sama seperti margin, padding juga dapat diatur setiap sisi.

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Properti	Fungsi
padding-top	Jarak isi dari atas
padding-right	Jarak isi dari kanan
padding-bottom	Jarak isi dari bawah
padding-left	Jarak isi dari kiri

---

7. Shorthand Padding

Satu nilai

padding: 20px;

Semua sisi = 20px.

Dua nilai

padding: 10px 20px;

Artinya:

Atas & bawah = 10px
Kiri & kanan = 20px

Empat nilai

padding: 10px 20px 30px 40px;

Urutannya tetap:

top → right → bottom → left

---

8. Perbedaan Margin dan Padding

Margin	Padding
Jarak di luar elemen	Jarak di dalam elemen
Mengatur jarak antar elemen	Mengatur jarak content dengan border
Berada di luar border	Berada di dalam border
Tidak menjadi bagian dari background elemen	Area padding mengikuti background elemen

Contoh:

.box {
    margin: 30px;
    padding: 20px;
}

          MARGIN
    ←──────────────→

    ┌─────────────────────┐
    │      PADDING        │
    │   ┌─────────────┐   │
    │   │   CONTENT   │   │
    │   └─────────────┘   │
    └─────────────────────┘

---

9. Contoh Program Lengkap

<!DOCTYPE html>
<html>
<head>
    <title>Margin dan Padding</title>

    <style>
        .box {
            width: 300px;
            background-color: lightblue;

            margin: 30px;
            padding: 20px;

            border: 2px solid blue;
        }
    </style>
</head>

<body>

    <div class="box">
        <h2>Belajar CSS</h2>
        <p>
            Ini adalah contoh penggunaan margin dan padding.
        </p>
    </div>

</body>
</html>

Hasil konsepnya:

BODY

       ← margin 30px →

       ┌──────────────────────┐
       │    padding 20px      │
       │                      │
       │   Belajar CSS        │
       │                      │
       │   Ini adalah contoh  │
       │   penggunaan CSS.    │
       │                      │
       └──────────────────────┘

10. Kesimpulan

Margin = jarak ke luar

Padding = jarak ke dalam

Cara paling mudah mengingat:

Margin menjauhkan kotak dari elemen lain.
Padding menjauhkan isi dari tepi kotaknya.