Margins

Published Aug 8, 2021Updated Sep 9, 2021

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.