In CSS, the fundamental visual rendering model places all components of the
document tree in physical and virtual rectangular boxes, each having a specific
height and width. An element's rendering box consists primarily of an
element's content at the center (text, images, etc.) Surrounding the
element's content (moving outward in rectangular layers/strips) are
optional padding, surrounded by any optional border effects, surrounded
in turn by any optional margin values that may be specified.
The margin properties allow the author to specify how much space will be
inserted between other exterior elements and the current element border.
Negative values may be used with margin properties to create overlapping
content.
Each side of the margin dimensions (top, right, bottom and left) can be
addressed and controlled independently using separate properties, or a
convenient shorthand notation may be used that controls multiple sides at once.