The Box Model
The Box Model
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
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:
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!
This information on this page is only here to provide you with the visual example above. You DO NOT have to create any content as a result of reading through this page. If you have a good understanding of this model, simply move onto the next step.
Page updated
Report abuse