Detailed explanation of the use of CSS margin attribute

The easiest way to set margins is to use the margin attribute.

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

margin can be set to auto. A more common approach is to set a length value for the margins. The following declaration sets 1/4-inch margin on each side of the h1 element:

h1 {margin : 0.25in;}

The following example sets the four sides of the h1 element Different margins are defined respectively, and the length unit used is pixels (px):

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

are the same as the inner margin settings. These The order of values ​​is starting from the top margin (top) and rotating clockwise around the element:

margin: top right bottom left

In addition, you can also set a percentage value for margin:

p {margin : 10%;}

The percentage is calculated relative to the width of the parent element. The example above sets the margins for the p element to 10% of the width of its parent element.

The default value of margin is 0, so if a value is not declared for margin, no margin will appear. However, in practice, browsers already provide predetermined styles for many elements, and margins are no exception. For example, in browsers that support CSS, margins create "empty lines" above and below each paragraph element. Therefore, if no margin is declared for the p element, the browser may apply one on its own. Of course, as long as you specifically declare it, the default style will be overridden.

Value Copy

Remember? We mentioned value copying in the previous two sections. Below we explain to you how to use value copy.

Sometimes, we will enter some repeated values:

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

With value copying, you don’t have to type it repeatedly This pair of numbers. 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 rules that allow specifying less than 4 values ​​for margins. 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 bottom 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.

The image below provides a more intuitive way to understand this:

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

Using 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, you will definitely encounter this problem eventually. Suppose you want to set the top and left margins of the p element to 20 pixels, and set the bottom and right margins to 30 pixels. In this case, you must write:

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

to get the results you want. Unfortunately, in this case, the number of required values ​​cannot be reduced.

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;}

Same, so you can get the effect you want. The problem is that typing these autos is a bit cumbersome. If you only want to control margins on one side of an element, use the single-margin property.

One-sided margin property

You can use the one-sided margin property to set a value for the margin on a single side of an element. Let's say you want to set the left margin of the p element to 20px. Instead of using margin (which requires typing a lot of auto), you can use the following method:

p {margin-left: 20px;}

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

margin-top

margin-right

margin-bottom

margin-left

Multiple such unilateral attributes can be used in one rule, for example:

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

Of course, for this case, it might be easier to use margin:

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

Whether you use single-sided attributes or margin, the results are the same. Generally speaking, if you want to set margins for multiple sides, it's easier to use margin. However, from a documentation perspective, it doesn't actually matter which method you use, so you should choose whichever method is easier for you.

Tips and Notes

Tips: The default margin value defined by Netscape and IE for the body tag is 8px. Not so with Opera. In contrast, Opera defines the default value of internal padding as 8px, so if you want to adjust the edges of the entire website and display it correctly in Opera, you must customize the body's padding.

CSS margin example:

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>

Set the right margin of the text:

<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>

Set the top margin of the text:

<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

Set the bottom margin of the text Margins:

<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

All margin properties in one declaration:

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

The above is the detailed content of Detailed explanation of the use of CSS margin attribute. For more information, please follow other related articles on the PHP Chinese website!