Belajar CSS Part 10 - CSS Box Model

Box Model

Box Model adalah konsep yang menjelaskan bahwa semua elemen halaman web dapat dianggap dan diproses sebagai kotak (box). Dalam CSS, istilah "box model" digunakan ketika berbicara tentang desain dan tata letak sebuah halaman web.

Box Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Box Model terdiri dari beberapa lapisan, yaitu:

margin
border
padding
konten

Gambar di bawah merupakan ilustrasi box model:

Box Model memungkinkan kita untuk menambahkan border di sekitar elemen, dan untuk mendefinisikan ruang antara elemen-elemen.

Contoh

div {
    background-color: greenyellow;
    width: 300px;
    border: 25px solid lightskyblue;
    padding: 25px;
    margin: 25px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Demo CSS Box Model</h2>

<p> CSS Box Model pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Box Model terdiri dari border, padding, margin, dan konten.</p>

<div>Teks ini adalah isi dari kotak (isi konten). Konten ini memiliki padding 25px, margin 25px dan border biru langit 25px. Selain itu juga, teks ini memiliki warna latar belakang hijau kekuningan. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Hasilnya:

Mengatur Lebar dan Tinggi Elemen

Dalam rangka pengaturan lebar dan tinggi suatu elemen dengan benar di semua browser, kita perlu tahu bagaimana cara kerja box model.

Apabila kita ingin mengatur lebar dan tinggi dari suatu elemen dengan menggunakan CSS, kita hanya mengatur lebar dan tinggi dari area konten saja. Untuk menghitung ukuran penuh dari sebuah elemen, kita harus menambahkan padding, border, dan margin.

Contoh

div {
    width: 320px;
    height:100px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menghitung lebar dan tinggi box model:</h2>
<div>Kotak ini memiliki tinggi 100px dan lebar 320px.</div>

</body>
</html>

Hasilnya: