CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
Table of Contents
Margin is the transparent space outside an element’s border — it pushes other elements away. You can set margins for all four sides individually or using shorthand.
Try It — Margins in Action
Preview
Margin Shorthand Values
| Shorthand | Sets |
|---|---|
margin: 20px | All 4 sides = 20px |
margin: 10px 40px | Top & Bottom = 10px, Left & Right = 40px |
margin: 10px 20px 30px | Top=10, Left&Right=20, Bottom=30 |
margin: 10px 20px 30px 40px | Top, Right, Bottom, Left (clockwise) |
Tip:
margin: 0 autois the classic way to horizontally center a block element. The element must have a definedwidthfor this to work.