According to CSS box model, every element in the document tree is a rectangular box made up of four areas - content, padding, border, and margin. Margin is a transparent area controlled by margin-top
, margin-right
, margin-bottom
, margin-left
, and shorthand margin
.
In CSS, the adjoining margins of two or more elements (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Margins only collapse in the block direction. So if you are in a horizontal writing mode, only vertical margins are specified to collapse.
overflow
other than visible
) do not collapse with their in-flow children.collapsed_margin = max(pm_1, pm_2,..., pm_k)
collapsed_margin = min(nm_1, nm_2, ..., nm_k)
collapsed_margin = max(pm_1, pm_2, ..., pm_k) + min(nm_1, nm_2, ..., nm_l)