CSS Margins

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

Margin - Individual Sides

CSS allows you to set margins for individual sides of an element:

div {
  margin-top: 50px;
  margin-right: 30px;
  margin-bottom: 50px;
  margin-left: 80px;
}

In this example, the top margin is 50px, the right margin is 30px, the bottom margin is 50px, and the left margin is 80px.

Shorthand Property: Margin

The margin property is a shorthand property for margin-top, margin-right, margin-bottom, and margin-left.

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

In this example, the top margin is 25px, the right margin is 50px, the bottom margin is 75px, and the left margin is 100px.

You can also provide less than four values:

• If you provide one value, it applies to all sides. For example, margin: 25px;.
• If you provide two values, the first value applies to the top and bottom margins, and the second value applies to the right and left margins. For example, margin: 25px 50px;.
• If you provide three values, the first value applies to the top margin, the second value applies to the right and left margins, and the third value applies to the bottom margin. For example, margin: 25px 50px 75px;.

Auto Value

When the margin property has an auto value, the browser automatically adjusts the margins to center the element within its container.

div {
  width: 300px;
  margin: auto;
}

In this example, the div element is centered within its container.

Negative Values

You can also set the margin property to a negative value.

div {
  margin: -25px;
}

In this example, the div element will overlap the elements before and after it by 25px.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.