Margins

Published Aug 8, 2021Updated Sep 9, 2021
Contribute to Docs

Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space.

p {
border: 1px solid aquamarine;
margin: 20px;
}

Here, the code will place 20 pixels of space on the outside of the paragraph’s box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph’s border.

If you want to be even more specific about the amount of margin on each side of a box, you can use the following properties:

Margins

margin
Shorthand property for margin-top, margin-bottom, margin-left and margin-right to create space around an element or for each side individually.
margin-bottom
Defines the bottom margin area for an element.
margin-left
Defines the left margin area for an element.
margin-right
Defines the right margin area for an element.
margin-top
Defines the top margin area for an element.

All contributors

Looking to contribute?

Learn CSS on Codecademy