The 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