The box model is quite easy to understand once you get the hang of it. Mainly, the box model describes boxes that are created from elements on a page, whether its an image, a paragraph, list, etc.
Each box has the actual content with optional padding, border, and margins. In your CSS you can specify the properties for each box. As you can see in the image below, it illustrates how the box model shows the various properties of padding, border, and margins of the content area.
It also shows the content, padding, border, and margin edges which is the perimeter for each area and each box contains four edges.
To put it plainly, each content has a box. With each content, you can specify padding, border, and margin. Padding can be specified using the ‘padding’ property, borders can be specified using the ‘border’ property, and margins can be specified using the ‘margin’ property. Setting the border for content creates a border for the box. Setting padding for the content will create padding space between the border and content, while setting margins will create space outside of the border.
Here is another example: Box model
I hope this makes it a bit clearer to understand the box model.
To get a better understanding of the box model, please visit http://www.w3.org/TR/CSS2/box.html.
