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-left, and shorthand
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.
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)