The CSS Margin Property

Adding CSS margins

The CSS margin property allows you to add extra space around the chosen element:

p {
   margin: 10px 15px 10px 15px;
}

Providing sufficient spacing around menu items, scrollbars, and other HTML elements clarifies and improves the overall structure of the page. Thus, CSS margins make it easier for the user to navigate and interact.

Note: don't get confused with CSS margin vs padding: margin sets the spacing outside the borders, and padding does so within the element.

Setting CSS margin values

When using the CSS margin property, you can define up to four values:

margin: value1 value2 value3 value4;

Based on how many values you specify, the property assumes the remaining values using different logic. Understand how to define the CSS margin order by reviewing the table below.

You can define the width for CSS margin in either length units (e.g., pixels) or percentages (in relation with the container block). The default value is 0 0 0 0, which represents no CSS margin.

Tip: you can also use the keyword auto, in which case the browser will select the margin for the HTML element.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Manipulating each CSS margin individually

CSS margin is actually a shorthand for four subproperties:

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

If you don't want to use the shorthand or just want to be extra sure about the CSS margin order, you can also use the subproperties on their own.

To apply margin to the top of an element, use margin-top:

p {
   margin-top: 10px;
}

To apply margin to the right of an element, use margin-right:

p {
   margin-right: 5px;
}

To apply margin to the bottom of an element, use margin-bottom:

p {
   margin-bottom: 10px;
}

To apply margin to the left of an element, use margin-left:

p {
   display: block;
   margin-left: 5px;
}

Browser support

Chrome

1+

Edge

12+

Firefox

1+

IE

3+

Opera

3.5+

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

10.1+

Safari

1+