There is a lot of confusion regarding the "Box Model", or margin, border and padding, in CSS. Each HTML element inherits these properties and it is therefore beneficial to know how to work with them.
Content
The content area is the area immediately surrounding the content. This gives the element its place within the flow of the page.
Padding
This is the area between the content and the border. It is by default set to 0, but can be changed in the CSS. Its properties of padding-top, -right, -bottom and -left can be changed independetly of each other. Padding increases the visible size of the element.
Border
Border is a visible outline of the element. It has properties of border style (solid, dashed, double or dotted), width and color.
Margin
Margin is often confused with padding because they sometimes have the same effect when trying to position an element on a page. They are different from each other because margin does not actually change the size of the element, rather it pushes or clears other elements on the page.