The CSS Margin Property

The CSS Margin Property – Right, Left, Top, Bottom, Shorthand | CCS Margin Values

by

CSS Margin Property is used to define space around elements. It is entirely transparent and doesn’t have any background color. Margin Property Values are not inherited by the Child Elements. There are several properties to set an element margin such as margin-left, margin-right, margin-top, margin-bottom, etc. We can change all properties at once using the shorthand margin property. This tutorial explains all the CSS Margin Properties and the Margin Values in detail.

CSS Margin Properties

Property Description
margin It is used to set all properties in one declaration.
margin-left Used for specifying the left margin of an element.
margin-right Used for indicating the right margin of an element.
margin-top Specifies the top margin of an element.
margin-bottom Sets the bottom margin of an element.

CSS Margin Values

Value Description
auto It allows the browser to calculate a margin.
length It indicates a margin pt, px, cm, etc. Default value of length is 0px.
% Used for defining a margin in percent of the width of containing element.
inherit Inherits the margin from the parent element.

Margin Property

The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.

Margins are set using lengths, percentages, or the keyword auto and can have negative values. Here’s an example:

.box {
  margin: 0 3em 0 3em;
}

Do Read:

CSS Margin Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
background-color: pink; 
} 
p.ex { 
margin-top: 50px; 
margin-bottom: 50px; 
margin-right: 100px; 
margin-left: 100px; 
} 
</style> 
</head> 
<body> 
<p>This paragraph is not displayed with specified margin. </p> 
<p class="ex">This paragraph is displayed with specified margin.</p> 
</body> 
</html>

Margin Shorthand Property

Margin is a shorthand to denote multiple margins at a time, depending on the number of values entered. It behaves differently. It accepts up to four values, shown here:

.box {
    margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>
}

If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:

.box {
  margin: 0 1.5em;
}

.box {
  margin: 0 1.5em 0 1.5em;
}

Thus, if only one value is defined, this sets all four margins to the same value. If three values are declared, it is margin: [top] [left-and-right] [bottom];.

Any of the individual margins can be declared using longhand, in which case you would define only one value per property:

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

Values Accepted by Margin Property

Margin accepts any kind of length unit and the most common ones are px, rem, em. It even accepts percentage values and a special value named auto.

Using Auto to Center Elements

Each of the margin properties can also accept a value of auto. A value of auto basically tells the browser to define the margin for you. In most cases, a value of auto will be equivalent to a value of 0 (which is the initial value for each margin property) or else whatever space is available on that side of the element. However, auto is handy for horizontal centering:

.container {
  width: 980px;
  margin: 0 auto;
}

In this example, two things are done to center this element horizontally within the available space:

  • The element is given a specified width
  • The left and right margins are set to auto

Without the specified width, the auto values would essentially have no effect, setting the left and right margins to 0 or else to whatever is the available space inside the parent element.

It should also be pointed out that auto is useful only for horizontal centering, and so using auto for top and bottom margins will not center an element vertically, which can be confusing for beginners.

Collapsing Margins

Vertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom).

Negative Margins

As you might suspect, while a positive margin value pushes other elements away, a negative margin will either pull the element itself in that direction or pull other elements toward it.

Browser Compatability

CSS Margin Property supports the following browsers.

  • Chrome
  • Android
  • IE Phone
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Firefox (Gecko)
  • Safari (WebKit)
  • Safari Mobile
  • Opera
  • Opera Mobile