totn CSS

CSS: margin property

This CSS tutorial explains how to use the CSS property called margin with syntax and examples.

Description

The CSS margin property defines the margin on all sides of an element.

Syntax

The CSS margin property can be expressed with one, two, three or four values provided. And each value can be expressed as either a fixed value or as a percentage.

One Value

The syntax for the CSS margin property (with 1 value) is:

margin: all;

When one single value is provided, the margin value will apply to all four sides of the element (ie: top, right, bottom, left).

Two Values

The syntax for the CSS margin property (with 2 values) is:

margin: top_bottom left_right;

When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.

Three Values

The syntax for the CSS margin property (with 3 values) is:

margin: top right_left bottom;

When three values are provided, the first value will apply to the top of the element. The second value will apply to the right and left sides of the element. The third value will apply to the bottom of the element.

Four Values

The syntax for the CSS margin property (with 4 values) is:

margin: top right bottom left;

When four values are provided, the first value will apply to the top of the element. The second value will apply to the right side of the element. The third value will apply to the bottom of the element. The fourth value will apply to the left side of the element.

The top, right, bottom, and left margin values can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { margin: 5px; }
div { margin: 4em 5px; }
div { margin: 2px 5px 10px; }
div { margin: 4px 5px 2px 3px; }
percentage Percentage value
div { margin: 8%; }
div { margin: 4% 5%; }
div { margin: 2% 5% 8%; }
div { margin: 4% 5% 2% 3%; }
fixed and percentage
(in combination)
Combination of fixed and percentage values
div { margin: 4% 5px; }
div { margin: 2em 5% 8px; }
div { margin: 4px 5em 2% 3px; }
auto Used for centering blocks
div { margin: 0 auto; }
div { margin: 4% auto; }
inherit Element will inherit the margin from its parent element
div { margin: inherit; }

Note

  • Each value in the CSS margin property can be expressed as either a fixed value or as a percentage.
  • You can combine fixed value and percentage values in the CSS margin property.
  • Negative values are allowed in the CSS margin property.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also margin-top, margin-bottom, margin-left, and margin-right.

Browser Compatibility

The CSS margin property has basic support with the following browsers:

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

Example

We will discuss the margin property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values (as either a fixed value or as a percentage).

Using Fixed Value

Let's look at a CSS margin example where we provide one value expressed as a fixed value.

div { margin: 10px; }

In this CSS margin example, we have provided one value of 10px which would apply to all 4 sides of the element.

Let's look at how to use the optional auto value in the CSS margin property.

div { margin: 0 auto; }

In this CSS margin example, we are centering the <div> tag and applying 0 margins.

Next, we'll look at a CSS margin example where we provide two values expressed as a fixed value.

div { margin: 10px 5em; }

In this CSS margin example, we have provided two values. The first value of 10px would apply to the top and bottom of the element. The second value of 5em would apply to the left and right sides of the element.

Next, we'll look at a CSS margin example where we provide three values expressed as a fixed value.

div { margin: 2px 4px 6px; }

In this CSS margin example, we have provided three values. The first value of 2px would apply to the top of the element. The second value of 4px would apply to the right and left sides of the element. The third value of 6px would apply to the bottom of the element.

Next, we'll look at a CSS margin example where we provide four values expressed as a fixed value.

div { margin: 5px 10px 12px 8px; }

In this CSS margin example, we have provided four values. The first value of 5px would apply to the top of the element. The second value of 10px would apply to the right side of the element. The third value of 12px would apply to the bottom of the element. The fourth value of 8px would apply to the left side of the element.

Using Percentage

Let's look at a CSS margin example where we provide one value expressed as a percentage.

div { margin: 4%; }

In this CSS margin example, we have provided one value of 4% which would apply to all 4 sides of the element.

Let's look at how to use the optional auto value in the CSS margin property.

div { margin: 4% auto; }

In this CSS margin example, we are centering the <div> tag and applying 4% margins.

Next, we'll look at a CSS margin example where we provide two values expressed as a percentage.

div { margin: 10% 5%; }

In this CSS margin example, we have provided two values. The first value of 10% would apply to the top and bottom of the element. The second value of 5% would apply to the left and right sides of the element.

Next, we'll look at a CSS margin example where we provide three values expressed as a percentage.

div { margin: 2% 5% 10%; }

In this CSS margin example, we have provided three values. The first value of 2% would apply to the top of the element. The second value of 5% would apply to the right and left sides of the element. The third value of 10% would apply to the bottom of the element.

Next, we'll look at a CSS margin example where we provide four values expressed as a percentage.

div { margin: 5% 10% 2% 8%; }

In this CSS margin example, we have provided four values. The first value of 5% would apply to the top of the element. The second value of 10% would apply to the right side of the element. The third value of 2% would apply to the bottom of the element. The fourth value of 8% would apply to the left side of the element.