CSS Box Model

The CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.

Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.

Penjelasan dari bagian-bagian yang berbeda:

Content - Isi dari kotak, di mana teks dan gambar muncul

Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan

Border - Sebuah batas yang terjadi di sekitar padding dan konten

Margin - Menghapus sebuah daerah di luar perbatasan. Margin transparan

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

Width and Height of an Element

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.

Mari gaya <div> elemen untuk memiliki lebar total 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}