 CSS margin box

The CSS margin box is the box bounded by the outer margin edges, outside the border, padding and content regions. It describes the margin contribution around a generated box. Margins are not part of the CSS border box sized by box-sizing: border-box.^[ref]

For a simple box with border-box width 100 CSS pixels and left/right margins of ten pixels each, the margin-box width is 120 pixels. A declaration width: 100px does not automatically include those margins, even when border-box sizing is selected.

The margin area is also not a painted extension of the element's background. Visible background and border geometry should therefore not be used to infer that all surrounding layout space belongs to the same painted area. Auto and negative margins have their specified layout effects as well, so a margin is not restricted to a fixed positive gap.

Vertical relationships require particular care. Two adjoining margins can participate in CSS margin collapsing, where the resulting separation is not simply their sum. For instance, eligible adjoining positive margins of 20 and 30 pixels collapse to 30 pixels under the applicable rules, rather than yielding 50.^[ref]

A margin-box calculation is consequently meaningful only together with the formatting context and the directions being considered. The uncomplicated horizontal sum illustrates box geometry; it is not a substitute for the separate vertical collapsing rules.