Box Model

Melalui kelas ini, kamu diajak untuk:

• Mengidentifikasikan properti-properti yang relevan untuk mengatur box model.
• Membuat box model sederhana melalui CSS.

Tentang Box Model

Secara esensial, model kotak di CSS adalah kotak yang membungkus elemen-elemen yang ada di HTML. Pada praktiknya, model kotak juga berkaitan dengan tata letak. Maka berbicara model kotak berarti membicarakan komponen-komponen yang terdiri dari: margin, padding, border, konten, serta lebar dan tinggi.

Di bagian sebelumnya, kita telah mengulas tentang komponen-komponen tata letak seperti margin dan padding. Di materi ini, kita akan mengupas properti lebar (width) dan tinggi (height).

Mengatur Lebar dan Tinggi Kotak

Mengatur lebar dan tinggi di CSS menggunakan properti width dan height. Kita bisa mengatur masing-masing sesuai dengan keinginan.

.kotak {
        border-style: solid;
        border-width: 2px;
        border-color: blue;
        width: 300px;
        height: 200px;
    }

Dari kode di atas, hasil yang didapat adalah seperti gambar di bawah ini:

Mengatur Tata Letak Kotak

Kita juga dapat mengatur tata letak kotak dengan properti margin dan padding.

.kotak {
        border-style: solid;
        border-width: 2px;
        border-color: blue;
        width: 300px;
        height: 200px;
        margin: 50px 60px 50px 60px;
        padding-left: 30px;
        padding-top: 30px; 
    }

Dari kode di atas, hasil yang didapat adalah seperti gambar di bawah ini: