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:
- the box itself which is an invisible container (everything not grey in the image here)
- the border which goes around that box (red dashes here)
- the margin around that to keep the box away from other things (invisible so you see the grey background of the page)
- the padding between the border and the content to keep the content away from the border (again invisible so you see the blue background of the div through it)
- the content (here it is just text but it could be anything)
The key concept is that when you set the size of these parts you need to know what you are setting:
- the element width and height sets the content area only
- any padding is added to that
- any border is added to that
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 |
Feel 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:
- the page has padding, add a rule to the style sheet to set body padding to 0 and try it
- paragraphs also have margins and padding so add a rule to set those to 0
- you may not have styled the div elements but they have margins and padding anyway (the browser applies defaults) so you would need to set the margin and padding for the first two to 0 manually and finally everything will touch but don't as it messes them up as examples instead add more if you want (you could add two more to try it)