CSS margins


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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

This element has a margin of 60px on each side


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

This element has a different margin on each side


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;
                      }
                  

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.