About Box Model (or - The CSS box model)

HTML and CSS uses the "Box Model" to wrap each of the document HTML elements. The wrapping object is a rectangle (a box) that controls the elements display in terms of border, margin, content and padding.

The Margin
Margin is the area around and outside element. It has transparent background.

The Border
Is a line border around the element.

The Padding
Padding is the area between the border and the element itself.

The content
The HTML element (image, text etc.)

This can be summarized in the following image:

When you define a style for your box using CSS, you are defining the layout in which the element will display.