CSS • Box Model

CSS box model terdiri dari 4 lapisan, dan setiap elemen HTML memiliki ini.

Margin

Bagian luar, yang mengatur jarak antara element.
Posisinya di luar Border.
Tidak memiliki background

Border

Pembatas konten.
Posisinya diantar padding dan margin.
Tidak Memiliki Background, tapi warna dan ketebalan bisa di atur.

Padding

Memberikan jarak pada element di dalam konten.
Posisinya di dalam Border tapi masih bagian dari konten.
Background mengikuti konten, karena dia berada di dalam konten.

Konten

Berisi Seperti Text, Gambar, Dll.
Aturan width dan height ada disini.

Cara Menghitung Lebarnya

1div {
2  width: 200px;      /* content width */
3  padding: 10px;     /* padding semua sisi */
4  border: 5px solid; /* border semua sisi */
5  margin: 20px;      /* margin semua sisi */
6}

$$ \begin{array}{lcl} \text{Konten} & = & 200\text{px} \\ \text{Padding} & = & 10\text{px} + 10\text{px} = 20\text{px} \\ \text{Border} & = & 5\text{px} + 5\text{px} = 10\text{px} \\ \hline \text{Total} & = & 230\text{px} \end{array} $$

ℹ️ Note
Margin tidak termasuk, karena berada di luar konten/box-sizing, dia hanya berperan memberikan jarak antara element.

Secara default (box-sizing: content-box;)