The Box Model

When it comes to layout we often think of the margin, padding and border.

They assist in properly laying out a design as it may have been planned. Each of these are discussed in further tutorials however before reading them, it is important that you become familiar with the box model.

The box model can be seen as a series of boxes which each represent something else. Firstly of course there is the content. Surrounding the content is the padding, surrounding the padding is the border and surrounding the border is the margin.

Here is a visual:

box-model