CSS Dasar #15 - Box Model: Margin, Padding, Border, dan Content

byFerdian Rahabista -
0

Box Model adalah konsep paling fundamental dalam CSS yang harus dipahami oleh setiap web developer. Setiap elemen HTML sebenarnya adalah sebuah kotak (box) yang memiliki beberapa lapisan. Memahami Box Model akan membantu Anda mengatur layout, jarak, dan ukuran elemen dengan presisi.

Apa Itu CSS Box Model?

CSS Box Model adalah konsep bahwa setiap elemen HTML dirender sebagai kotak persegi panjang yang terdiri dari beberapa lapisan:

Lapisan Box Model (dari luar ke dalam):
1. Margin → jarak di luar border (transparan, untuk jarak antar elemen)
2. Border → garis tepi (bisa diatur warna, ketebalan, gaya)
3. Padding → jarak di dalam border (kena background, untuk jarak konten ke tepi)
4. Content → isi elemen (teks, gambar, atau elemen lain)
Margin (luar) - warna merah
Border (garis tepi) - area kuning
Padding (dalam) - area hijau
Content (isi) - area biru

Visualisasi Box Model: Margin (merah) → Border (kuning) → Padding (hijau) → Content (biru)

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 (busa/alas)
- Content = foto itu sendiri

1. Content (Isi Elemen)

Content adalah area di mana teks, gambar, atau elemen lain ditampilkan. Ukuran content bisa diatur dengan properti width dan height.

Contoh:

<style>
    .content-box {
        width: 200px;
        height: 100px;
        background: #3b82f6;
        color: white;
        text-align: center;
        line-height: 100px;
    }
</style>

<div class="content-box">Content 200x100px</div>
Content 200x100px

2. Padding (Jarak Dalam)

Padding adalah jarak antara content dengan border. Padding membuat konten tidak menempel ke tepi elemen.

Contoh Tanpa Padding vs Dengan Padding:

<style>
    .no-padding {
        background: #3b82f6;
        color: white;
        width: 250px;
    }
    .with-padding {
        background: #22c55e;
        color: white;
        width: 250px;
        padding: 20px;
    }
</style>

<div class="no-padding">Teks menempel ke tepi (tanpa padding)</div>
<div class="with-padding">Teks memiliki jarak 20px dari tepi (dengan padding)</div>
Teks menempel ke tepi (tanpa padding)
Teks memiliki jarak 20px dari tepi (dengan padding)

Padding Per Sisi:

<style>
    .padding-custom {
        background: #3b82f6;
        color: white;
        padding-top: 10px;
        padding-right: 30px;
        padding-bottom: 20px;
        padding-left: 15px;
    }
</style>

<div class="padding-custom">
    Padding: top 10px, right 30px, bottom 20px, left 15px
</div>
Padding: top 10px, right 30px, bottom 20px, left 15px

Cara Penulisan Padding (Shorthand):

Jumlah Nilai Contoh Hasil
1 nilai padding: 20px; semua sisi 20px
2 nilai padding: 10px 20px; atas-bawah 10px, kiri-kanan 20px
3 nilai padding: 10px 20px 15px; atas 10px, kiri-kanan 20px, bawah 15px
4 nilai padding: 10px 15px 20px 25px; atas 10px, kanan 15px, bawah 20px, kiri 25px

3. Border (Garis Tepi)

Border adalah garis tepi yang mengelilingi padding dan content. Border memiliki 3 komponen: ketebalan (width), gaya (style), dan warna (color).

Contoh:

<style>
    .border-solid { border: 2px solid #3b82f6; padding: 15px; margin: 10px; }
    .border-dashed { border: 2px dashed #ef4444; padding: 15px; margin: 10px; }
    .border-dotted { border: 2px dotted #22c55e; padding: 15px; margin: 10px; }
    .border-double { border: 4px double #8b5cf6; padding: 15px; margin: 10px; }
    .border-groove { border: 4px groove #f59e0b; padding: 15px; margin: 10px; }
</style>
Solid (garis padat)
Dashed (garis putus-putus)
Dotted (garis titik-titik)

Border Per Sisi:

<style>
    .border-sides {
        border-top: 3px solid #ef4444;
        border-right: 3px solid #22c55e;
        border-bottom: 3px solid #3b82f6;
        border-left: 3px solid #f59e0b;
        padding: 15px;
    }
</style>

<div class="border-sides">Setiap sisi punya warna berbeda!</div>
Setiap sisi punya warna berbeda!

4. Margin (Jarak Luar)

Margin adalah jarak di luar border yang memisahkan elemen dengan elemen lain. Margin transparan dan tidak memiliki warna background.

Contoh Tanpa Margin vs Dengan Margin:

<style>
    .no-margin {
        background: #3b82f6;
        color: white;
        padding: 15px;
    }
    .with-margin {
        background: #22c55e;
        color: white;
        padding: 15px;
        margin: 20px;
    }
</style>

<div class="no-margin">Kotak 1 (tanpa margin)</div>
<div class="no-margin">Kotak 2 (tanpa margin) - menempel</div>
<div class="with-margin">Kotak 3 (dengan margin 20px)</div>
<div class="with-margin">Kotak 4 (dengan margin 20px)</div>
Kotak 1 (tanpa margin)
Kotak 2 (tanpa margin) - menempel
Kotak 3 (dengan margin 15px)
Kotak 4 (dengan margin 15px)

Margin Auto (Memusatkan Elemen):

<style>
    .center-box {
        width: 200px;
        background: #3b82f6;
        color: white;
        padding: 15px;
        text-align: center;
        margin: 0 auto;
    }
</style>

<div class="center-box">Kotak di tengah (margin: 0 auto)</div>
Kotak di tengah (margin: 0 auto)
Tips Margin:
  • Gunakan margin: 0 auto; untuk memusatkan elemen block (seperti div) secara horizontal
  • Margin bisa bernilai negatif (contoh: margin-top: -10px;) untuk menarik elemen ke atas
  • Margin vertikal (atas-bawah) bisa collapse (menyatu) jika dua elemen bersebelahan

Perhitungan Lebar Total (Box Model)

Penting untuk dipahami: Lebar total elemen TIDAK hanya dari properti width, tapi juga padding + border (kecuali menggunakan box-sizing: border-box).

Rumus Lebar Total (tanpa box-sizing: border-box):

Lebar Total = width + padding-left + padding-right + border-left + border-right

Contoh Perhitungan:

<style>
    .box {
        width: 200px;
        padding: 20px;
        border: 5px solid black;
        background: #3b82f6;
        color: white;
    }
</style>

<div class="box">Lebar total = 200 + 40 + 10 = 250px</div>
Lebar total = 200 + 30 + 6 = 236px

Meskipun width="200px", lebar total menjadi 236px karena padding dan border ditambahkan di luar.

Box Sizing: Solusi untuk Perhitungan yang Mudah

box-sizing: border-box; membuat width dan height sudah termasuk padding dan border. Ini adalah praktik terbaik modern.

Contoh border-box:

<style>
    .border-box {
        width: 200px;
        padding: 20px;
        border: 5px solid black;
        background: #22c55e;
        color: white;
        box-sizing: border-box;
    }
</style>

<div class="border-box">Lebar total = 200px</div>
Lebar total = 200px

Dengan box-sizing: border-box, padding dan border sudah termasuk dalam width.

Rekomendasi: Gunakan reset berikut di awal CSS untuk menghindari kebingungan perhitungan lebar: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Contoh Proyek: Kartu Profil dengan Box Model

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model - Kartu Profil</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        /* Kartu Profil - Menerapkan Box Model */
        .profile-card {
            background: white;
            width: 350px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            
            /* Box Model properties */
            padding: 30px;
            margin: 20px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: white;
            
            /* Border pada avatar */
            border: 3px solid white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        h1 {
            font-size: 24px;
            margin-bottom: 5px;
            color: #1e293b;
        }
        
        .title {
            color: #3b82f6;
            font-weight: 500;
            margin-bottom: 15px;
        }
        
        .bio {
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .social-link {
            display: inline-block;
            padding: 8px 16px;
            background: #f0f4f8;
            border-radius: 20px;
            text-decoration: none;
            color: #1e293b;
            font-size: 14px;
            transition: all 0.3s;
            
            /* Border pada sosial link */
            border: 1px solid #e2e8f0;
        }
        
        .social-link:hover {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
            transform: translateY(-2px);
        }
        
        .contact-btn {
            display: inline-block;
            background: #3b82f6;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            
            /* Border pada tombol */
            border: none;
            cursor: pointer;
        }
        
        .contact-btn:hover {
            background: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(59,130,246,0.4);
        }
        
        .info-box {
            background: #eef2ff;
            border-radius: 16px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
            border-left: 4px solid #3b82f6;
        }
        
        .info-box h3 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .info-box ul {
            margin-left: 20px;
        }
        
        .info-box li {
            margin-bottom: 8px;
            color: #475569;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        hr {
            margin: 15px 0;
            border: none;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>
<body>

    <div class="profile-card">
        <div class="avatar">
            JD
        </div>
        
        <h1>John Doe</h1>
        <p class="title">Frontend Developer</p>
        
        <p class="bio">
            Seorang pengembang web yang antusias dengan teknologi frontend. 
            Memiliki pengalaman dalam membangun website responsif dan interaktif.
        </p>
        
        <div class="social-links">
            <a href="#" class="social-link">GitHub</a>
            <a href="#" class="social-link">LinkedIn</a>
            <a href="#" class="social-link">Twitter</a>
        </div>
        
        <a href="#" class="contact-btn">Hubungi Saya</a>
        
        <div class="info-box">
            <h3>Box Model Properties yang Digunakan</h3>
            <ul>
                <li><code>margin: 20px;</code> → jarak kartu dari elemen lain</li>
                <li><code>padding: 30px;</code> → jarak konten di dalam kartu ke border</li>
                <li><code>border: 1px solid rgba(0,0,0,0.05);</code> → garis tepi kartu</li>
                <li><code>width: 350px;</code> → lebar kartu (dengan box-sizing: border-box)</li>
                <li><code>border: 3px solid white;</code> → border pada avatar</li>
                <li><code>margin: 0 auto;</code> → memusatkan avatar secara horizontal</li>
                <li><code>padding: 8px 16px;</code> → padding pada tombol sosial link</li>
            </ul>
            
            <hr>
            
            <h3>Perhitungan Box Model</h3>
            <ul>
                <li>Tanpa <code>box-sizing: border-box</code>: lebar total = width + padding + border</li>
                <li>Dengan <code>box-sizing: border-box</code>: lebar total = width (sudah termasuk padding + border)</li>
            </ul>
            
            <hr>
            
            <h3>Ringkasan Box Model</h3>
            <ul>
                <li><strong>Content</strong> → isi elemen (teks, gambar)</li>
                <li><strong>Padding</strong> → jarak dalam (kena background)</li>
                <li><strong>Border</strong> → garis tepi</li>
                <li><strong>Margin</strong> → jarak luar (transparan)</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual kartu profil:

JD

John Doe

Frontend Developer

Pengembang web yang antusias dengan teknologi frontend.

GitHub LinkedIn
Box Model Properties: margin, padding, border, width, box-sizing

Tabel Ringkasan Box Model

Properti Posisi Fungsi Contoh
margin Luar border Jarak antar elemen margin: 20px;
border Antara margin dan padding Garis tepi border: 2px solid blue;
padding Dalam border Jarak konten ke border padding: 15px;
width/height Content Ukuran area konten width: 200px;

Kesalahan Umum Pemula

  • Tertukar margin dan padding → margin untuk jarak luar, padding untuk jarak dalam.
  • Lupa bahwa padding dan border menambah lebar total → width 200px + padding 20px = lebar total 240px.
  • Lupa menggunakan box-sizing: border-box → Sering menyebabkan layout berantakan.
  • Menggunakan margin: auto tanpa menentukan width → Margin auto hanya berfungsi jika elemen memiliki lebar yang ditentukan.
  • Margin collapse (margin menyatu) → Margin vertikal antara dua elemen bisa menyatu (yang terbesar yang dipakai).
Debugging Tips:
  • Buka Developer Tools (F12) → inspect elemen → lihat Box Model visual di tab Styles (biasanya di bagian bawah)
  • Hover ke elemen untuk melihat area margin (kuning), border (abu-abu), padding (hijau), content (biru)
  • Gunakan * { margin: 0; padding: 0; box-sizing: border-box; } untuk reset default browser

Latihan Singkat

  1. Buat file HTML dengan 3 div, beri margin, padding, dan border yang berbeda
  2. Buat kotak dengan lebar 300px, padding 20px, border 5px, hitung lebar totalnya
  3. Buat kotak yang sama dengan box-sizing: border-box, bandingkan lebarnya
  4. Buat tombol dengan padding 10px 20px, border-radius 30px (efek pil)
  5. Buat kartu sederhana dengan margin antar kartu 20px, padding dalam kartu 15px, border 1px solid #ddd

Intisari Hari Ini

  • Box Model adalah konsep bahwa setiap elemen adalah kotak dengan 4 lapisan
  • Margin → jarak luar (transparan, untuk jarak antar elemen)
  • Border → garis tepi (bisa diatur warna, ketebalan, gaya)
  • Padding → jarak dalam (kena background, untuk jarak konten ke tepi)
  • Content → isi elemen (teks, gambar)
  • box-sizing: border-box → membuat width/height sudah termasuk padding dan border
  • Selalu gunakan reset * { margin: 0; padding: 0; box-sizing: border-box; } untuk konsistensi
Tantangan: Buat sebuah Halaman Galeri Foto dengan menerapkan Box Model! Persyaratan:
  • Grid galeri dengan 6 foto (3x2 atau 2x3)
  • Setiap foto memiliki padding 10px di dalam kartu
  • Setiap kartu memiliki border 1px solid #ddd dan border-radius 12px
  • Jarak antar kartu (margin) 20px
  • Container utama memiliki padding 20px
  • Gunakan box-sizing: border-box di semua elemen
  • Hitung lebar total setiap kartu jika width: 250px, padding: 10px, border: 1px
  • Tambahkan kotak penjelasan yang menunjukkan perhitungan box model pada kartu

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #14 - Menggunakan Google Fonts di CSS (Lanjutan)
Artikel Selanjutnya: CSS Dasar #16 - Margin Collapse dan Negative Margin

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

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