Margin:
 
Border:
 
Padding:
 
Border Type:
Measure In:

Measurement Hint

Box Model in Action

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.

 

Sample of the CSS Box Model

Margin

Border

Padding

CONTENT

Padding

Border

Margin

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.

Points is a printing measurement. There are 72 points per inch, and this has no relevance to the screen, which may change in size. Points tend to be rendered slightly larger than pixels in most browsers.

Inches: - A physical measurement usefull only in print style sheets as it bears no relevance to screen diminsions.

Centimeter: - A physical measurement usefull only in print style sheets as it bears no relevance to screen diminsions.

Millimeter: - A physical measurement usefull only in print style sheets as it bears no relevance to screen diminsions. This is 1/10th of a centimeter.

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.