Close Menu

Model Kotak (Box Model)

Table of Contents

Model Kotak atau Box Model dalam CSS adalah konsep dasar yang menjelaskan bagaimana elemen HTML diatur dan diukur. Setiap elemen dalam dokumen HTML dianggap sebagai kotak persegi panjang yang terdiri dari beberapa lapisan: konten, padding, border, dan margin. Memahami Box Model sangat penting untuk mengatur layout dan tampilan elemen di halaman web.

Struktur Box Model #

Content: Bagian ini berisi konten elemen seperti teks, gambar, atau elemen lainnya. Ukuran konten dapat diatur menggunakan properti width dan height.

    Padding: Ruang di sekitar konten elemen, di dalam batas elemen (border). Padding menambah ruang di dalam elemen tanpa mengubah ukuran konten. Padding diatur menggunakan properti padding.

    Border: Garis yang mengelilingi padding dan konten. Border diatur menggunakan properti border.

    Margin: Ruang di luar batas elemen. Margin digunakan untuk mengatur jarak antara elemen dan diatur menggunakan properti margin.

      Visualisasi Box Model #

      +---------------------------+
|         Margin            |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |
|  |  | +-----------+ |  |  |
|  |  | |  Content  | |  |  |
|  |  | +-----------+ |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

      Properti Box Model #

      Content #

      • width: Mengatur lebar konten.
      • height: Mengatur tinggi konten.
      div {
    width: 200px;
    height: 100px;
}

        Padding #

        • padding: Mengatur padding di semua sisi.
        • padding-top, padding-right, padding-bottom, padding-left: Mengatur padding secara individual.
        div {
    padding: 20px; /* Padding 20px di semua sisi */
}

div {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

        Border #

        • border: Mengatur semua properti border dalam satu deklarasi.
        • border-width: Mengatur lebar border.
        • border-style: Mengatur gaya border (solid, dashed, dotted, dll.).
        • border-color: Mengatur warna border.
        div {
    border: 1px solid black; /* Border hitam, solid, lebar 1px */
}

div {
    border-width: 2px;
    border-style: dashed;
    border-color: red;
}

        Margin #

        • margin: Mengatur margin di semua sisi.
        • margin-top, margin-right, margin-bottom, margin-left: Mengatur margin secara individual.
        div {
    margin: 20px; /* Margin 20px di semua sisi */
}

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

        Contoh Penggunaan Box Model #

        Berikut adalah contoh penggunaan Box Model dalam dokumen HTML:

        <!DOCTYPE html>
<html>
<head>
    <title>Contoh Box Model</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid black;
            margin: 30px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">
        Ini adalah contoh Box Model.
    </div>
</body>
</html>

        Penjelasan:

        • Elemen div dengan class box memiliki lebar 200px dan tinggi 100px untuk kontennya.
        • Padding 20px di semua sisi menambah ruang di dalam border.
        • Border hitam solid dengan lebar 5px mengelilingi padding.
        • Margin 30px di semua sisi menambah ruang di luar border.
        • Latar belakang elemen diatur dengan warna lightblue.

        Dengan memahami Box Model, Anda dapat mengontrol dengan tepat bagaimana elemen-elemen di halaman web Anda diatur dan ditampilkan. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

        What are your Feelings