A box in CSS has four edges, the margin edge, border edge, padding edge, and content edge as illustrated by the following diagram:
DIAGRAM TO BE WRITTEN
The margin area is the area inside the margin edge, and its dimensions are the margin-box width and margin-box height.
The border area is the area inside the border edge, and its dimensions are the border-box width and border-box height.
The padding area is the area inside the padding edge, and its dimensions are the padding-box width and padding-box height.
The content area is the area inside the edge, and its dimensions are the content width (or content-box width) and content height (or content-box height).
When margin collapsing happens, the margin area is not clearly defined since margins are shared between boxes.
For non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the border and padding appear visually around the content.