The box model

box_model

An imaginary diagram that outlines each DOM element:

So 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 adapting 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


You May Also Like

About the Author: admin