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.
This box has content that will help illustrate how clearing works.