HTML Dasar #23 - Mengatur Margin dan Padding untuk Jarak

byFerdian Rahabista -
0

Setelah kita belajar warna, ukuran font, dan perataan teks, sekarang saatnya menguasai konsep paling penting dalam CSS layout: margin dan padding. Kedua properti ini mengatur jarak — tanpanya, semua elemen akan menempel satu sama lain!

Apa Itu Margin dan Padding?

Margin dan padding adalah bagian dari CSS Box Model. Setiap elemen HTML sebenarnya adalah kotak (box) yang memiliki beberapa lapisan:

Box Model (dari luar ke dalam):
• Margin → jarak di luar border (antar elemen)
• Border → garis tepi (akan dipelajari nanti)
• Padding → jarak di dalam border (antara konten dan border)
• Content → isi elemen (teks, gambar, dll)
Analogi Sederhana (Bingkai Foto):
• Margin = jarak antara bingkai foto dengan bingkai lain di dinding
• Border = tebal bingkai foto itu sendiri
• Padding = jarak antara foto dengan bingkai
• Content = foto itu sendiri

Perbandingan Margin vs Padding

Aspek Margin Padding
Posisi Di luar border Di dalam border
Warna latar Tidak kena background Kena background
Bisa negatif? Bisa (contoh: -10px) Tidak
Collapse (menyatu) Margin vertikal bisa menyatu Tidak pernah collapse
Fungsi utama Mengatur jarak antar elemen Mengatur jarak konten ke border

Cara Penulisan Margin dan Padding

Margin dan padding bisa ditulis dalam 4 cara berbeda, dari yang paling panjang hingga paling singkat:

1. Satu nilai (semua sisi sama)

margin: 20px;     /* semua sisi: 20px */
padding: 15px;    /* semua sisi: 15px */

2. Dua nilai (atas-bawah | kiri-kanan)

margin: 20px 10px;     /* atas-bawah: 20px, kiri-kanan: 10px */
padding: 15px 25px;    /* atas-bawah: 15px, kiri-kanan: 25px */

3. Tiga nilai (atas | kiri-kanan | bawah)

margin: 20px 10px 15px;     /* atas:20px, kiri-kanan:10px, bawah:15px */

4. Empat nilai (atas | kanan | bawah | kiri) — searah jarum jam

margin: 10px 20px 15px 25px;   /* atas:10px, kanan:20px, bawah:15px, kiri:25px */
padding: 5px 10px 5px 10px;    /* atas:5px, kanan:10px, bawah:5px, kiri:10px */

5. Properti spesifik per sisi

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Contoh Visual Margin dan Padding

Area Margin (kuning, di luar border)
Area Padding (hijau, di dalam border)
Content (biru)

Margin (kuning) = jarak luar | Padding (hijau) = jarak dalam | Content (biru) = isi

Contoh Margin (Jarak Antar Elemen)

Margin mengatur jarak antar elemen. Tanpa margin, elemen akan saling menempel.

Tanpa Margin:

<div style="background: #3b82f6; padding: 15px; color: white;">Kotak 1</div>
<div style="background: #22c55e; padding: 15px; color: white;">Kotak 2</div>
Kotak 1
Kotak 2

Kotak 1 dan Kotak 2 menempel (tanpa margin)

Dengan Margin:

<div style="background: #3b82f6; padding: 15px; color: white; margin-bottom: 20px;">Kotak 1</div>
<div style="background: #22c55e; padding: 15px; color: white;">Kotak 2</div>
Kotak 1
Kotak 2

Ada jarak 20px antara Kotak 1 dan Kotak 2 (margin-bottom)

Margin untuk Memusatkan Elemen (auto):

<div style="width: 200px; background: #3b82f6; color: white; padding: 15px; margin: 0 auto;">
    Kotak di tengah
</div>
Kotak di tengah

margin: 0 auto; membuat kotak rata tengah secara horizontal

Contoh Padding (Jarak di Dalam Elemen)

Padding mengatur jarak antara konten dengan border. Tanpa padding, teks akan menempel ke tepi.

Tanpa Padding:

<div style="background: #f0f4f8; border: 2px solid #3b82f6;">
    Teks ini menempel ke tepi border karena tidak ada padding.
</div>
Teks ini menempel ke tepi border karena tidak ada padding.

Dengan Padding:

<div style="background: #f0f4f8; border: 2px solid #3b82f6; padding: 20px;">
    Teks ini memiliki jarak 20px dari border karena ada padding.
</div>
Teks ini memiliki jarak 20px dari border karena ada padding.
Tips Penggunaan:
  • Gunakan padding untuk membuat konten tidak menempel ke tepi (dalam kartu, tombol, form)
  • Gunakan margin untuk membuat jarak antar elemen (antar kartu, antar paragraf)
  • Gunakan margin: 0 auto; untuk memusatkan elemen block (seperti div, gambar)

Studi Kasus: Galeri Kartu dengan Margin dan Padding

Berikut contoh galeri kartu yang menggunakan margin (jarak antar kartu) dan padding (jarak di dalam kartu):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Galeri Kartu - Margin & Padding</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;  /* MEMUSATKAN CONTAINER */
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;  /* JARAK ANTAR JUDUL DAN KARTU */
            color: #1e293b;
        }
        
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;  /* JARAK ANTAR KARTU (seperti margin) */
            justify-content: center;
        }
        
        .card {
            background: white;
            width: 280px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-img {
            background: #3b82f6;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        
        .card-content {
            padding: 20px;  /* JARAK DI DALAM KARTU */
        }
        
        .card-title {
            font-size: 20px;
            color: #1e293b;
            margin-bottom: 10px;  /* JARAK ANTAR JUDUL DAN DESKRIPSI */
        }
        
        .card-desc {
            font-size: 14px;
            color: #64748b;
            line-height: 1.5;
            margin-bottom: 15px;  /* JARAK ANTAR DESKRIPSI DAN HARGA */
        }
        
        .card-price {
            font-size: 18px;
            font-weight: bold;
            color: #3b82f6;
            margin-bottom: 15px;  /* JARAK ANTAR HARGA DAN TOMBOL */
        }
        
        .btn {
            display: block;
            background: #3b82f6;
            color: white;
            text-align: center;
            padding: 10px;  /* JARAK DI DALAM TOMBOL */
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: background 0.2s;
        }
        
        .btn:hover {
            background: #2563eb;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;  /* JARAK ANTAR GALERI DAN FOOTER */
            padding: 20px;  /* JARAK DI DALAM FOOTER */
            background: #1e293b;
            color: #94a3b8;
            border-radius: 12px;
        }
        
        .info-box {
            background: #fef9c3;
            padding: 20px;
            border-radius: 12px;
            margin-top: 40px;
            border-left: 4px solid #eab308;
        }
        
        .info-box h3 {
            margin-bottom: 10px;
        }
        
        .info-box ul {
            margin-left: 20px;
        }
        
        .info-box li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Galeri Produk Terbaru</h1>
        
        <div class="gallery">
            <div class="card">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Smartphone X1</h3>
                    <p class="card-desc">Ponsel pintar dengan kamera 108MP dan baterai tahan lama.</p>
                    <p class="card-price">Rp 3.999.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
            
            <div class="card">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Laptop Pro 14</h3>
                    <p class="card-desc">Laptop tipis dengan prosesor Intel Core i7 dan RAM 16GB.</p>
                    <p class="card-price">Rp 12.999.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
            
            <div class="card">
                <div class="card-img"></div>
                <div class="card-content">
                    <h3 class="card-title">Headphone Wireless</h3>
                    <p class="card-desc">Headphone dengan noise cancellation dan baterai 30 jam.</p>
                    <p class="card-price">Rp 899.000</p>
                    <a href="#" class="btn">Beli Sekarang</a>
                </div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Penjelasan Margin & Padding yang Digunakan</h3>
            <ul>
                <<li><strong>margin: 0 auto;</strong> → memusatkan container di tengah halaman</li>
                <li><strong>margin-bottom: 30px;</strong> → jarak antara judul dan galeri</li>
                <li><strong>gap: 20px;</strong> → jarak antar kartu (alternatif margin)</li>
                <li><strong>margin-top: 40px;</strong> → jarak antara galeri dan footer</li>
                <li><strong>padding: 20px;</strong> → jarak di dalam kartu (konten ke border)</li>
                <li><strong>margin-bottom: 10px;</strong> → jarak antara judul dan deskripsi</li>
                <li><strong>padding: 10px;</strong> → jarak di dalam tombol (teks ke tepi tombol)</li>
            </ul>
        </div>
        
        <div class="footer">
            <p>&copy; 2024 - Belajar Margin & Padding CSS</p>
        </div>
    </div>

</body>
</html>

Hasil visual galeri kartu:

Galeri Produk Terbaru

Smartphone X1

Ponsel pintar dengan kamera 108MP.

Rp 3.999.000

Beli

Laptop Pro 14

Prosesor Intel Core i7, RAM 16GB.

Rp 12.999.000

Beli

Headphone Wireless

Noise cancellation, baterai 30 jam.

Rp 899.000

Beli

Perbandingan Margin vs Padding (Visual)

Margin

Konten

Margin: 15px (kuning)

Mempengaruhi jarak ke elemen lain

Padding

Konten

Padding: 15px (biru tua)

Mempengaruhi jarak konten ke border

Kesalahan Umum Pemula

  • Tertukar margin dan padding → Margin untuk jarak luar, padding untuk jarak dalam.
  • Lupa satuan (px, rem, %) → margin: 20; (salah) vs margin: 20px; (benar).
  • Menggunakan margin untuk jarak dalam kartu → Harusnya padding agar background ikut.
  • Menggunakan padding untuk jarak antar elemen → Harusnya margin.
  • Lupa box-sizing: border-box; → Padding bisa membuat elemen melebar dari ukuran yang diinginkan.
Debugging Tips:
  • Buka Developer Tools (F12) → tab Elements → inspect elemen → lihat Box Model visual
  • Hover ke elemen di inspector untuk melihat area margin (kuning) dan padding (hijau)
  • Gunakan * { margin: 0; padding: 0; } di awal untuk reset default browser

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan Margin Padding"
  2. Buat 3 kotak berwarna berbeda dengan ukuran 200x200px
  3. Atur margin-bottom: 20px pada kotak 1 dan 2 (agar ada jarak antar kotak)
  4. Atur padding: 20px pada semua kotak, lalu masukkan teks di dalamnya
  5. Buat satu kotak dengan margin: 0 auto; agar berada di tengah halaman
  6. Simpan dan buka di browser, amati perbedaannya

Intisari Hari Ini

  • Margin → jarak di luar elemen (antar elemen)
  • Padding → jarak di dalam elemen (konten ke border)
  • Margin bisa bernilai negatif dan bisa collapse, padding tidak
  • Margin: 0 auto; → memusatkan elemen block secara horizontal
  • Gunakan padding untuk kenyamanan baca (teks tidak menempel tepi)
  • Gunakan margin untuk mengatur jarak antar komponen
Tantangan Akhir Pekan: Buat sebuah Halaman Dashboard Sederhana yang menerapkan margin dan padding dengan baik! Persyaratan:
  • Header dengan judul (padding di dalam, margin bawah ke konten)
  • Sidebar kiri (lebar 250px) dengan menu-menu (padding di dalam menu, margin antar menu)
  • Area konten utama (padding di dalam kartu, margin antar kartu)
  • Minimal 3 kartu informasi (statistik, pengunjung, pendapatan)
  • Footer dengan copyright (padding di dalam, margin atas ke konten)
  • Gunakan margin: 0 auto; untuk memusatkan container utama
  • Gunakan * { margin: 0; padding: 0; box-sizing: border-box; } di awal CSS
  • Buat kotak penjelasan di bagian bawah yang mendokumentasikan setiap penggunaan margin dan padding

Bonus: Buat efek hover pada kartu yang mengubah margin atau padding sedikit (misal: transform: scale(1.02)).

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #22 - Properti CSS Wajib: color, background, font-size, text-align
Artikel Selanjutnya: HTML Dasar #24 - Mengatur Border dan Border Radius (Membuat Kartu)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال