CSS margins

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

                      .margin-example {
                        margin: 60px;
                      }
                  

                      <p class="margin-example">
                            This element has a margin of 60px on each side
                        </p>
                  

Live preview

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

The following example sets different margins for all four sides of a <p> element:

                      .margin-example-2 {
                        margin-top: 20px;
                        margin-bottom: 100px;
                        margin-right: 50px;
                        margin-left: 80px;
                      }
                  

                      <p class="margin-example-2">
                          This element has a different margin on each side
                        </p>
                  

Live preview

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

So, here is how it works:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

                      p {
                        margin: 25px 50px 75px 100px;
                      }