The margin property defines the space outside an element’s border and controls how far that element sits from neighboring boxes and the edges of its container. It is a fundamental part of the CSS box model alongside padding and border, and unlike padding or border it creates empty exterior space rather than increasing the element’s painted interior. Because margins are external to the box, they affect layout by pushing other elements away rather than altering an element’s internal content area or background.

Margins behave differently depending on the formatting context: block-level and inline-level boxes treat margins in different ways, and the element’s display type determines much of that behavior (display). Some margin interactions are non-intuitive — for example, vertical margins between certain block boxes can combine in collapsing scenarios, while margins on floated or absolutely positioned elements interact with surrounding content differently. Floated elements shift and influence text flow, and positioned elements are taken out of normal flow, so margin effects vary with how an element participates in layout (float, position).

Developers commonly use margins as a lightweight spacing tool to create gutters, separate components, or nudge elements relative to one another; their external nature makes them well suited for creating whitespace without altering an element’s internal measurements. That said, how margins influence the final rendered layout also depends on related box-sizing and clipping behavior — an element’s sizing model and how overflow is handled can change what parts of the layout are visible or hidden when margins push content around (box-sizing, overflow). Understanding how margins collapse, propagate, and interact with different layout contexts is important for predictable, maintainable spacing in CSS.