The box model according to the specification

[This is 400 pixels wide]


The box model; width and padding.

The box

This is the box with some elements. All these elements have a yellow background. The red around these elements is part of the box and is called the padding.

Code from the box

margin: auto;
width: 400px;
background: red;
padding: 50px;

Code from the elements inside the box

margin: 0;
padding: 0.5em 0;
background: yellow;

The same, with a 20px blue border


Home - More stuff