Apa itu box model pada CSS

box model adalah sebuah box atau "kotak" yang membungkus setiap elemen atau tag pada HTML, yang terdi

Apa itu box model ?

Setiap elemen atau tag HTML ditampilkan dalam bentuk box atau kotak, tetapi ada juga sebagian orang menamai kotak persegi panjang. Didalam CSS ini disebut dengan istilah box-model.

Jadi box model adalah sebuah box atau “kotak” yang membungkus setiap elemen atau tag pada HTML, yang terdiri dari properti: margin, border, padding dan konten. Dalam CSS, istilah box model digunakan ketika berbicara tentang desain dan tata letak. Supaya tidak bingung silakan lihat ilustrasi gambar dibawah ini:

ilustrasi box model

Penjelasan dari setiap bagian:

  • Konten – Teks, gambar, atau konten media lainnya dalam elemen.
  • Padding – Ruang didalam konten.
  • Border – Garis antara padding dan margin.
  • Margin – Ruang diluar konten.
div {
    background-color: yellow;
    border: 10px solid blue;
    padding: 20px;
    margin: 30px;
    width: 200px;
}

Unsur width dan height

Biasanya para web design ketika mengatur lebar dan tinggi suatu elemen menggunakan properti width dan height. Tetapi pada kenyataannya itu semua hanya mengatur lebar dan tinggi area konten elemen saja. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, border, dan margin.

#abu {
    width: 260px;
    background-color: grey;
}
#kuning {
    width: 200px;
    background-color: yellow;
    border: 10px solid blue;
    padding: 20px;
    margin: 0;
}

Silakan Anda lihat hasil dari contoh diatas !!

Box berwarna abu-abu mempunyai lebar 260px dan box berwarna kuning mempunyai lebar 200px, tapi jika Anda perhatikan kedua lebar box tersebut mempunyai lebar yang sama bukan? Agar tidak bingung mari kita hitung kenapa bisa terjadi seperti itu.

Berikut perhitungannya:

200px (lebar) 
+ 40px (padding kiri + kanan) 
+ 20px (border kiri + kanan) 
+ 0px (margin kiri + kanan) 
= 260px

Menghitung width dan height

Lebar total elemen harus dihitung seperti ini:

Total elemen lebar = width + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan

Tinggi total elemen harus dihitung seperti ini:

Tinggi total elemen = height + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah

Memperbaiki box model

Dengan properti box-sizing Anda bisa memperbaiki suatu elemen box/kotak agar sesuai dengan properti width dan height.

#box1 {
    width: 300px;
    height: 150px;
	background-color: yellow;
    box-sizing: border-box;
}
#box2 {
    width: 300px;
    height: 150px;
	background-color: yellow;
    padding:  20px;
    box-sizing: border-box;
}
#box3 {
    width: 300px;
    height: 150px;
    border: 10px solid black;
    box-sizing: border-box;
}
#box4 {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box;
}

Sekarang Anda tidak perlu khawatir tentang ukuran akhir kotak elemen jika menambahkan properti padding atau border.

Jika Anda perhatikan contoh diatas, itu berarti Anda harus melakukan perulangan box-sizing: border-box; untuk memastikan bahwa semua elemen diukur dengan cara yang lebih intuitif.

Contoh dibawah ini menerapkan ke semua elemen dengan menggunakan selektor bintang * :

*  {
    box-sizing: border-box;
}
Informasi: Anda akan belajar lebih dalam tentang box model dan properti box-sizing di CSS3