Skip to main content

Learn CSS Margins: A Guide to Managing Space in Web Design

CSS Margins are a way to create space around an element's content, separating it from other elements on the page.

Margins can be set for individual sides of an element (top, right, bottom, left) or for all sides at once.

As an example:

/* Setting margin for all sides */
.element {
     margin: 20px;
}

/* Setting margin for individual sides */
.element {
     margin-top: 10px;
     margin-right: 20px;
     margin-bottom: 30px;
     margin-left: 40px;
}

In this example:

  • The margin property sets the margin for all sides of the element to 20 pixels.
  • The margin for individual sides can be set using the margin-top, margin-right, margin-bottom, and margin-left properties.
Negative values are valid

Negative values can also be used to create overlapping elements or to move an element closer to another element.

CSS Margins individual example​

Example of how you can apply individual margins to an HTML element using CSS:

Editor

Loading...

In this example:

  • We have applied individual margins to a <div> element with the class name my-element.
  • The CSS styles applied to this class include a margin-top of 10 pixels, margin-right of 20 pixels, margin-bottom of 30 pixels, and margin-left of 40 pixels.
  • We have also set the background color to light blue and added padding to the element to give it some spacing between the content and the border.

CSS Margins for all sides example​

Example of how you can apply margins to all sides of an HTML element using CSS:

Editor

Loading...

In this example:

  • We have applied margins to all sides of a <div> element with the class name my-element.
  • The CSS styles applied to this class include a margin of 20 pixels, which is shorthand for setting the margin for all sides of the element.
  • We have also set the background color to light blue and added padding to the element to give it some spacing between the content and the border.

Margin - Shorthand Property​

The margin property in CSS is a shorthand property that allows you to set the margin for all four sides of an element at once. You can also use this property to set different values for each side of the element.

The syntax for the margin shorthand:

margin: [top] [right] [bottom] [left];

As an example:

Editor

Loading...

In this example:

  • We are setting the margin for the .element class with the values of 10px for the top margin, 20px for the right margin, 30px for the bottom margin, and 40px for the left margin.

You can also set fewer values, and the missing values will be set to the default value of 0.

As an example:

Editor

Loading...

In this example:

  • The .element class will have a margin of 10px for the top and bottom margins, and 20px for the right and left margins.

You can also use the auto keyword to center an element horizontally within its container.

As an example:

Editor

Loading...

In this example:

  • The .element class will have no top or bottom margin, and the left and right margins will be automatically calculated to center the element within its container.

The inherit Value​

The inherit value is a CSS keyword that allows you to inherit the value of a property from its parent element. By using the inherit value, you can ensure that a child element inherits the value of a particular property from its parent element.

As an example:

Editor

Loading...

In this example:

  • We have two nested <div> elements, one with the class name parent and the other with the class name child.
  • The parent class has a margin of 10px. The child class has a margin set to inherit, which means it will inherit the margin property from its parent element, which in this case is 10px.
  • We have also set the background color of the child class to yellow, to make it stand out from its parent.