CSS Box model

The CSS box model is the method by which we can understand how margin, padding, border width on element width. So basically it’s –

An imaginary diagram that outlines each DOM element

So the formula for width

Total calculated box width = content width + padding width + border width

.width {
	border: 4px solid #fff;
	padding-left: 8px;
	padding-right: 4px;
	width: 100px;
}

/*
100px content width
12px padding width
+ 8px border width
-------------------
125px box width
*/

When adopting a design, you’ll need to calculate the content width

.width {
	border: 1px solid #fff;
	padding-left: 14px;
	padding-right: 14px;
	width: 100px;
}

/*
340px box width (design)
28px padding width
- 2px border width
-------------------
310px content width
*/