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. 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.
A little content for the outer div.
And a little more for an inner div.
And more still for another inner div.