CSS • Menghitung Lebar Total Element

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

$$ \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} $$

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

Terkait Dengan Catatan

CSS • Box Model