CSS Box Model - Visual Tool

Version: 1.3
Last Updated: 01/21/2014
By: Walter Wimberly

Measurement Hint

Margin:  
Border:  
Padding:  

Sample of the CSS Box Model

Margin

Border

Padding

CONTENT

Padding

Border

Margin

Use the above controllers to modify the following Model

This is an example of the CSS Box model, with an interactive tool to figure out how to use it.

Use the sliders to see how the box is affected.

Pixels are relative to the resolution of the device, and how tightly they pack the pixels per inch. This can also change on the same device in many cases.

Ems: The 'M-width' of the font. How wide the capital M is for the given font. Thus it is proportional to the font being used.

Exs: The 'x-height' of the font. How wide the lower case x is for the given font. Thus it is proportional to the font being used.