The margin property of the CSS is used

The simplest way to set the margin is to use the margin property.

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

Margin can be set to auto. A more common practice is to set the length value for the margin. The following declaration sets a 1/4-inch-wide gap on each edge of the H1 element:

h1 {margin:0.25in;}

The following example defines a different margin for each of the four sides of the H1 element, using pixels (px) in length:

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

As with the padding settings, the order of these values is rotated clockwise around the elements starting from the top margin:

Margin:top Right Bottom Left

Alternatively, you can set a percentage value for margin:

p {margin:10%;}

Percentages are calculated relative to the width of the parent element. The above example sets the margin for the P element to be 10% of the width of its parent element.

The default value for margin is 0, so if you do not declare a value for margin, there is no margin. However, in practice, the browser has provided a predetermined style for many elements, and margins are no exception. For example, in a browser that supports CSS, margins generate a "blank line" above and below each paragraph element. Therefore, if the margin is not declared for the P element, the browser may apply an outer margin on its own. Of course, the default style will be overridden as long as you specifically make a declaration.

Value replication

Do you remember? We have mentioned value replication in the first two sections. Here we explain how to use value replication.

Sometimes, we enter some duplicate values:

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

With value replication, you don't have to type this pair of numbers repeatedly. The above rules are equivalent to the following rules:

p {margin:0.5em 1em;}

These two values can replace the previous 4 values. How is this done? CSS defines rules that allow for margins to be specified with less than 4 values. The rules are as follows:

If the value of the left margin is missing, the value of the right margin is used.

If the value of the margin is missing, the value of the top margin is used.

If the value of the right margin is missing, the value of the top margin is used.

Provides a more intuitive way to understand this:

In other words, if you specify 3 values for the margin, the 4th value (that is, the left margin) is copied from the 2nd value (the right margin). If two values are given, the 4th value is copied from the 2nd value, and the 3rd value (bottom margin) is copied from the 1th value (the top margin). In the last case, if only one value is given, the other 3 margins are copied from this value (the top margin).

With this simple mechanism, you only need to specify the necessary values without having to apply 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 */

There is a small drawback to this approach, and you will definitely encounter this problem in the end. Suppose you want to set the top margin and left margin 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 will give you the results you want. Unfortunately, there is no way to reduce the number of required values in this case.

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

p {margin:auto Auto auto 20px;}

The same way you can get the results you want. The problem is that typing these auto is a bit of a hassle. If you just want to control the margin on the side of the element, use the unilateral margin property.

Unilateral margin properties

You can use the unilateral margin property to set the value for the margin on the element's side. Suppose you want to set the left margin of the P element to 20px. Instead of using margin (you need to type a lot of auto), you can use the following methods:

p {margin-left:20px;}

You can use any of the following properties to set only the corresponding margin, without affecting all other margins directly:

Margin-top

Margin-right

Margin-bottom

Margin-left

Multiple such unilateral attributes can be used in a rule, such as:

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

Of course, it may be easier to use margin for this scenario:

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

The results are the same whether you use a single-sided attribute or a margin. In general, if you want to set margins for multiple edges, it is easier to use margin. However, from the perspective of the document display, it is not important to actually use any of the methods, so you should choose a method that is easier for you.

Hints and Notes

Tip: The default margin (margin) value defined by Netscape and IE on the body tag is 8px. And Opera is not like that. In contrast, opera defines the default value for internal padding (padding) as 8px, so if you want to adjust the edge portion of the entire site and display it correctly in opera, you must customize the body's padding.

CSS Margin Examples:

To set the right margin for text:


To set the top margin for text:


Set the bottom margin for text:


All margin properties are in a declaration: