Box Model CSS

Semua elemen HTML dapat dianggap sebagai box/kotak.

Box Model CSS

Dalam CSS, istilah "box model" digunakan ketika berbicara tentang desain dan tata letak.

Box model CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Ini terdiri dari: margin, border, padding, dan konten sebenarnya. Gambar di bawah mengilustrasikan box model:

Penjelasan dari bagian diatas:

• Content - Box konten, tempat teks dan gambar muncul
• Padding - Menghapus area di sekitar konten. Paddingnya transparan
• Border - Batas yang mengelilingi padding dan konten
• Margin - Menghapus area di luar perbatasan. Marginnya transparan

Box model memungkinkan kita untuk menambahkan batas di sekitar elemen, dan untuk menentukan ruang antar elemen.

Contoh

Demonstrasi box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Width dan Height Elemen

Untuk mengatur lebar (width) dan tinggi (height) elemen dengan benar di semua browser, Anda perlu mengetahui cara kerja box model.

Penting: Saat Anda mengatur properti lebar dan tinggi dari sebuah elemen dengan CSS, Anda tinggal mengatur lebar dan tinggi dari area konten . Untuk menghitung ukuran penuh suatu elemen, Anda juga harus menambahkan padding, border, dan margin.

Contoh

Elemen <div> ini akan memiliki lebar total 350px:

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

Berikut perhitungannya:

320px (lebar)

+ 20px (padding kiri + kanan)

+ 10px (border kiri + kanan)

+ 0px (margin kiri + kanan)

= 350px

Lebar total elemen harus dihitung seperti ini:

Lebar elemen total = lebar (width) + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan

Tinggi total elemen harus dihitung seperti ini:

Tinggi elemen total = tinggi (height) + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah

Sumber referensi: w3schools.com