Margins

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.
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors