This tool was designed to help show how the box model works in relation to other elements on the page. By making it interactive, I hope this makes it easier to understand that box model while you are learning CSS.
Version: 1.4
Last Updated: 02/26/2020
By: Walter Wimberly
Measurement Hint
Use the controllers to change the Model below. You can control the margin, border, and padding. Change the units of measurement to see what effect it has.
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 based on 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.
- 1 pica = 1/ 6 inch = 4.233 mm.
- 1 point = 1/ 12 pica = 1/72 inch = 127/360 mm = 0.3527 mm.
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.
x is for the given font. Thus it is proportional to the font being used.
