Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use the margin attribute in CSS", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the margin attribute in CSS" this article.

CSS outer margin

The white space around the element border is the outer margin. Setting the margin creates additional "white space" outside the element.

You can set the outer margin using the margin property, which accepts any unit of length, percentage value, or even negative value.

CSS margin attribute

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

The margin property accepts any unit of length, which can be pixels, inches, millimeters, or em, or can be set directly to auto.

A common practice is to set the length value for the outer margin. For example, a white space of 4 inches wide is set on each side of the H2 element:

H2 {margin: 0.25in;}

The following example defines different outer margins for the four sides of the H2 element, using px units:

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

Note: as with the inner margin setting, these values are rotated clockwise around the element starting from the top and outer margin (top).

Tip: as with the inner margin setting, when set to a percentage value, the percentage is calculated relative to the width of the parent element.

Tip: the default value for margin is 0, so if you don't declare a value for margin, there will be no margins.

In practice, however, browsers already provide predetermined styles for many elements, and outmargins are no exception.

For example, in browsers that support CSS, margins generate "blank lines" above and below each paragraph element.

Therefore, if the outer margin is not declared for the p element, the browser may apply an outer margin on its own.

Of course, as long as you make a special declaration, the default style will be overwritten.

Value replication

Sometimes, we enter duplicate values, such as:

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

With value copying, you can type this pair of numbers without having to repeat them. The above rule is equivalent to the following rule:

P {margin: 0.5em 1em;}

Tip: CSS defines rules that allow you to specify up to 4 values for outer 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.

With this simple mechanism, you only need to specify the necessary values instead of applying all four values, for example:

H2 {margin: 0.25em 1em 0.5em;} / * equivalent to 0.25em 1em 0.5em 1em * / h3 {margin: 0.5em 1em;} / * equivalent to 0.5em 1em 0.5em 1em * / p {margin: 1px;} / * equivalent to 1px 1px 1px 1px * /

Tip: if you just want to control the outer margin on one side of the element, use the single-sided outer margin attribute.

Unilateral margin attribut

Use the single-sided margin attribute to set the value for the outer margin on the single side of the element. For example, set the left margin of the p element to 20px:

P {margin-left: 20px;}

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

Margin-top

Margin-right

Margin-bottom

Margin-left

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

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

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

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

Tip: whether you use unilateral attributes or directly use margin, you should choose a method that is easier for you.

Tips and comments

The default margin (margin) value defined by Netscape and IE for body tags is 8px. Opera is not like this.

Instead, Opera defines the default value for padding as 8px.

If you want to adjust the edge of the entire site, you must customize the padding and margin of body.

CSS outer margin merge

Outer margin merging means that when two vertical outer margins meet, they will form an outer margin.

The height of the merged outer margin is equal to the larger of the two merged outer margins.

* {margin:0; padding:0; border:0;} # outer {width:300px; height:300px; background-color:red; margin-top:20px;} # inner {width:50px; height:50px; background-color:blue; margin-top:10px;}

Note: please note that if you do not set the inner margin and border of div

Then the upper outer margin of the inner div will be merged (superimposed) with the upper outer margin of the outer div.

All the outer margin properties are in one declaration

P.margin {margin: 2cm 4cm 3cm 4cm}

This paragraph does not specify an outer margin.

This paragraph has a specified margin.

This paragraph does not specify an outer margin.

CSS outer margin attribute and description

Margin: abbreviated attribute. Set all outer margin properties in a declaration.

Margin-bottom: sets the bottom margin of the element.

Margin-left: sets the left margin of the element.

Margin-right: sets the right margin of the element.

Margin-top: sets the top and outer margins of the element.

The above is all the content of the article "how to use the margin attribute in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.