the web workshop

To understand using CSS for layout you must understand the box model.

Margins, padding and borders are all part of what's known as the Box Model.

The Box Model works like this: in the middle you have the content area, surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Margin box
Border box
Padding box
Element box

You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every HTML element on the page, and that's a powerful thing!

View a video on the box model and floating
This is a big file so it will take a while to download.

While you're waiting, read more about the box model and borders at

This workshop is brought to you by

Please feel free to contact us with any comments and/or concerns about this workshop