In an HTML page, an element (it may contain other elements within it)generates a rectangular box. This is described as CSS Bo Model.
There are several CSS properties which work with respect to the CSS Box Model.
CSS Box Model has three dimensions: padding, border, and margin, in that order with respect to the actual content.
The following picture clarifies the concept of padding, border, and margin.
padding is the area next to the actual content.
The border is the area next to the padding. Alternatively, you can say that it is the area between padding and margin.
The margin is the area next to the border.
The properties padding, border and margin can be applied with respect to the top, left, bottom and right of the associated element. The following picture clarifies that :
The following picture shows the content, padding, border and margin edges :
-------- margin edge
Help the community: