Picture a physical box.  How big is it?  Even in the real world there are assumptions as you could measure the internal size or the external.  Depending on the thickness of the box material those two measurements could be very different.

On Web pages everything is in a two-dimensional box.  In this section we are considering HTML elements such as a div or a h1 but even elements such as em or individual letters of text are considered to be inside boxes in HTML and CSS. 

These are the parts of the box as illustrated by a div:A styled HTML div

The key concept is that when you set the size of these parts you need to know what you are setting:

So if you want to fix the size of the element on the page you need to include those three measurements in the total size.

Have a play with this simple illustration of the box model

To go back to the analogy at the top of this page if you want to send a 30cm3 item by mail you do not buy a 30cm box.  Instead you allow for any padding you might need to protect the content.  Then you get a box which has internal dimensions to match the content plus padding.  The total size of your package will be the 30cm of the thing inside, plus padding, plus the thickness of the box material itself.

Doing it

Now you have understood the basics the rest is much easier!  As ever though it is best to do things yourself so they are fully understood.  Try it by creating a new HTML page called boxmodel.html from your template and linking it to an external style sheet called boxmodel.css.  Create nine identical div elements.  Give each one an id attribute with the value as shown in the table below.

Then, in boxmodel.css, create rule sets for each id.  Finally add in rules to each rule set as shown here:

ID Styles/other Expected result
defaultbox set a background colour only Nothing!  The div has no height (because there is nothing in it) so is invisible
withcontent set a different background colour and also add a paragraph inside the div saying hello Text, background across whole page (almost)
withwidth add a paragraph, give it a different background colour and set the width to 300px Narrower, at the left of the window
withheight the same as withwidth (different colour though) plus add a height of 150px Higher
withoutcontent as withheight but delete the paragraph Still shows unlike defaultbox
withmargin as withheight (so the p is back) but add a margin of 50px; Box moves away from the left and from box above
withpadding as withmargin but make the paragraph a couple of lines long and add padding of 30px; the edge of the box moves away from the content (the text) making the box bigger
withborder as withpadding but add a border colour, style and width (10px) border drawn around box making it take up more space on the page
withauto as withborder but set left and right margins to auto (after the existing margin line) it centres

9 boxes illustrating the effect of size, padding, margins, borderFeel free to add more div elements.  You could also make the text inside describe what styles are applied to make it more useful as a revision tool.

One extra point.  Look at the first two visible div elements.  They do not touch the edge of the page.  There are also gaps between them but you had not set margins by then.  There are three reasons: