The CSS margin property creates breathing room outside an element’s border. Think of each element as a framed picture: padding is space inside the frame, while margin is the gap between that frame and nearby pictures. Margins help related content sit comfortably together and keep unrelated content from crowding one another. section 9.0 section 9.11
An element box has four layers: content, padding around the content, a border around the padding, and margin around the border. Because margin lives outside the border, changing it adjusts the space between elements rather than the room around an element’s own content. section 9.15 section 9.11
Set a margin independently on each side when the gaps need different sizes:
- margin-top adds space above the element. section 9.11
- margin-right adds space to its right. section 9.11
- margin-bottom adds space below it; 1em is a suggested general spacing for paragraphs. section 9.11
- margin-left adds space to its left. section 9.11
element {
margin-top: top-value;
margin-right: right-value;
margin-bottom: bottom-value;
margin-left: left-value;
}
Use the four side properties when you want to name each gap clearly. Replace each placeholder with a value and unit, such as 1em or 20px. section 9.11
Give a pull quote some room
A pull quote can have more space above and below than beside it, so it does not press against surrounding text. The four declarations below can also become one margin shorthand declaration with the same four values. This is a handy way to keep a rule short after you know the spacing you want on every side. section 9.11
.pullquote {
margin: 1.5em 2.5em 2em 3em;
}
This shorthand applies the pull quote’s four margin values in one declaration. Use it when a single rule is easier to read than four separate margin properties. section 9.11
Positive margin values push an element away from nearby elements or from the browser viewport’s edges. Negative values bring elements closer and can create overlap, so use them only when that overlapping effect is part of the design. Margin values may use units such as px, em, rem, vw, and vh, or a percentage; auto lets the browser set the margin to fit available space. section 9.11
Browsers supply default margins through their internal style sheets. A reset rule can set margins and padding to 0 so styling begins from a more consistent baseline across browsers. From there, add only the spacing your design needs. section 9.11
Try it: choose two paragraphs, give each a bottom margin of 1em, and notice how the text blocks become easier to distinguish. Then change one value to a negative margin and observe how quickly the elements move toward overlap. section 9.11
