Box Model: CSS Margin

The blank area surrounding the element's border is the margin. Setting margins creates additional 'space' outside the element.

The simplest way to set margins is to use the margin property, which accepts any length unit, percentage values, and even negative values.

CSS margin Property

The simplest way to set margins is to use Margin property.

The margin property accepts any length unit, which can be pixels, inches, millimeters, or em.

The margin can be set to auto. A more common practice is to set length values for margins. The following declaration sets a 1/4 inch wide space on all sides of the h1 element:

h1 {margin : 0.25in;}

The following example defines different margins for the four sides of the h1 element, using the pixel (px) unit of length:

h1 {margin : 10px 0px 15px 5px;}

Like the setting for padding, the order of these values starts from the top margin (top) and rotates clockwise around the element:

margin: top right bottom left

Additionally, you can also set a percentage value for margin:

p {margin: 10%;}

Percentages are calculated relative to the parent element's width. In this example, the margin set for the p element is 10% of the parent element's width.

The default value of margin is 0, so if no value is specified for margin, there will be no margin. However, in practice, browsers have provided predefined styles for many elements, and margins are no exception. For example, in browsers that support CSS, margins will generate 'empty lines' above and below each paragraph element. Therefore, if no margin is declared for the p element, the browser may apply a margin itself. Of course, if you make a special declaration, the default style will be overridden.

Value Repetition

Remember? We mentioned value repetition in the first two sections. Below, we will explain how to use value repetition.

Sometimes, we may enter some repetitive values:

p {margin: 0.5em 1em 0.5em 1em;}

Through value repetition, you do not need to type these numbers repeatedly. The above rule is equivalent to the following rule:

p {margin: 0.5em 1em;}

These two values can replace the previous 4 values. How is this done? CSS defines some rules that allow specifying fewer than 4 values for margins. The rules are as follows:

  • If the value of the left margin is missing, use the value of the right margin.
  • If the value of the bottom margin is missing, use the value of the top margin.
  • If the value of the right margin is missing, use the value of the top margin.

The following diagram provides a more intuitive way to understand this:

CSS Value Copy

In other words, if 3 values are specified for the margin, the 4th value (i.e., the left margin) will be copied from the 2nd value (the right margin). If two values are given, the 4th value will be copied from the 2nd value, and the 3rd value (the bottom margin) will be copied from the 1st value (the top margin). In the last case, if only one value is given, then the other 3 margins are copied from this value (the top margin).

With this simple mechanism, you only need to specify the necessary values, not all 4 values, for example:

h1 {margin: 0.25em 1em 0.5em;}	/* Equivalent to 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* Equivalent to 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Equivalent to 1px 1px 1px 1px */

This method has a small drawback, and you will definitely encounter this problem. Suppose you want to set the top and left margins of the p element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:

p {margin: 20px 30px 30px 20px;}

This is how you get the desired result. Unfortunately, in this case, there is no way to reduce the number of values needed.

Let's look at another example. If you want all margins except the left margin to be auto (the left margin is 20px):

p {margin: auto auto auto 20px;}

Similarly, this is how you get the desired effect. The problem is that typing these auto values can be麻烦. If you just want to control the margin on a single side of an element, please use the single-side margin property.

Single-side Margin Properties

You can use single-side margin properties to set the margin value for a single side of an element. Suppose you want to set the left outer margin of the p element to 20px. You don't have to use margin (you need to type many auto), but you can use the following method:

p {margin-left: 20px;}

You can use any of the following properties to set the margin for the corresponding side without affecting all other margins:

You can use multiple such single-side attributes in one rule, for example:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Of course, in this case, using margin may be easier:

p {margin: 20px 30px 30px 20px;}

Whether using a single-side attribute or using margin, the result is the same. Generally, if you want to set the margin for multiple sides, using margin will be easier. However, from the perspective of document display, actually using either method is not important, so you should choose the method that is easier for you.

Tips and Comments

Tip:Netscape and IE define the default margin (margin) value for the body tag as 8px. However, Opera is not the same. On the contrary, Opera defines the default value of the internal padding (padding) as 8px, so if you want to adjust the edge parts of the entire website and display them correctly in Opera, you must customize the padding of the body.

CSS Margin Example:

Set the left outer margin of the text
This example demonstrates how to set the left outer margin of text.
Set the right outer margin of text
This example demonstrates how to set the right outer margin of text.
Set the top outer margin of text
This example demonstrates how to set the top outer margin of text.
Set the bottom outer margin of text
This example demonstrates how to set the bottom outer margin of text.
All margin properties in one declaration.
This example demonstrates how to set all margin properties in one declaration.

CSS Margin Property

Property Description
margin Shorthand Property. Set all margin properties in one declaration.
margin-bottom Set the bottom outer margin of the element.
margin-left Set the left outer margin of the element.
margin-right Set the right outer margin of the element.
margin-top Set the top outer margin of the element.