Demonstrate Box Model

The box model governs how elements are rendered. For any content in a block element, like this one, there are three nested boxes. The innermost box is the content, surrounded by padding out to the element's border. The border resides within an outer box that encloses the element's margins. If margin is zero, then the border and margin boxes are superimposed. If padding is zero then the border and content boxes are superimposed.

This box has padding of 20 pixels and margin of 5% of its container's (the page) size. This page has a margin of 5% but no padding. Note how the h1 text butts against the left border. That's because its left margin was set to minus the padding of the containing box. The h1s have, by default, padding above and below, so you see a space between the text and the top of the page's border.

Here's a reference to the W3C description of the Box Model: W3C Box Model documentation