Figuring Out The Box Model

This is a quick tip which I thought I would share with you. When starting to learn CSS one of the first "ah ha" moments is when something clicks and you figure out how the box model works. Getting your head round this will certainly set you on the path of "I am starting to figure this out".

The method I use (and still use today) is to wrap all your main content boxes with a brightly coloured outline say 2px solid red, mix the colours up for different parts of your content, say red for the main content, blue for the aside etc.

section { outline: 2px solid red; }


I used to use border for this but since learning that outline does not effect the box model e.g. a 2px outline does not add 2px of width either side to your box, I now use outline for this task.

What this does is quickly show where the outer edges of your box are, not where you think they are. This is really useful when you have a layout which is not behaving as you thought it should and you need to do some debugging.

Box Model Example Pen