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

This article introduces the relevant knowledge of "the summary of margin attribute knowledge of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

A brief introduction to the 1.margin attribute

1. 1: margin percentage setting for normal streams

1.2: margin percentage setting for absolute positioning

Elements that cannot be applied to 2.margin

3. Outer margin folding (Collapsing margins)

The original intention of 3.1:Collapsing margins

3.2:Collapsing margins Typ

3.2.1: margin overlap of sibling elements

3.2.2: margin overlap of parent and child elements

3.2.3: the margin-bottom of the element itself will collapse when it is adjacent to the margin-top

4. Calculation rules of folded margin

4.1The margin participating in folding is all positive.

4.2The margin participating in folding is all negative.

4.3.There are positive and negative values in the margin participating in folding.

5.Collapsing margins solution

A brief introduction to the 1.margin attribute

Before introducing margin, section a picture of the W3C standard box model so that readers can see the relevant location.

Margin, as its name implies, is called the outer margin.

The basic properties of margin are as follows

A:margin is an abbreviation for 'margin-top',' margin-right', 'margin-bottom',' margin-left', indicating the size range of the margin.

The b:margin value can be one of the width values, percentage values, or 'auto'. Note that the margin must have units, which can be pixels, inches, millimeters, or em.

The c:margin percentage value is calculated relative to the width of the parent element.

D: when margin is margin:10px, the top,right,bottom,left (counterclockwise) direction is 10px; when margin is margin:10px 20px, the up and down direction is 10px, and the left and right direction is 20px; when margin is margin:10px 20px 5px, the top direction is 10px, the left and right direction is 20px, the bottom direction is 5px; when margin is margin:1px 2px 3px 4px, it means that the top direction is 1px, the right direction is 2px, the bottom direction is 3px, the left direction is 4px.

Through the brief introduction to margin above, we know that the percentage value of margin is calculated relative to the width of the parent element, but the calculation of the margin of the normal stream and the absolute positioning element is not the same.

1. 1: margin percentage setting for normal streams

In a normal flow element, the percentage of margin worth calculating is based on the width of its parent element.

XML/HTML Code copies content to the clipboard

CSS Code copies content to the clipboard

.container {

Width: 300px

Height: 300px

Background-color: lightpink

Margin: 10px

Display: inline-block

}

.container .content {

Width: 120px

Height: 120px

Background-color: lightgreen

Margin: 10%

}

As you can see, the margin in the direction of top left is 30px (300 * 10% = 30). There is a reason to set display for the parent element, which is mentioned in the following section, so don't be impatient.

Note that the values of the four directions of the margin are calculated based on the width of the parent element!

1.2: margin percentage setting for absolute positioning

In absolute positioning elements, if the parent element sets relative/absolute/fixed, the margin percentage value is calculated based on the parent element's width; if the parent element does not set relative/absolute/fixed, the margin percentage value is calculated based on the width of the entire page.

CSS Code copies content to the clipboard

.container {

Width: 300px

Height: 300px

Background-color: lightpink

Display: inline-block

}

.container .content {

Width: 120px

Height: 120px

Background-color: lightgreen

Position: absolute; / * added to change this attribute * /

Margin: 10%

}

As you can see, the value of margin is no longer 30px, but 137px (the page width of my computer is 1370px). This is because the child element container sets absolute, which causes the child element to deviate from the document stream, and the values of the four directions are located according to the page, so the margin value changes. If you want the child element to be positioned based on the parent element, you can set one of the values of relative/fixed/absolute for the parent element, so that the margin percentage calculation is still 30px, just like margin in a normal stream. Students can try it for themselves.

Elements that cannot be applied to 2.margin

Setting the margin value with the following elements has no effect.

A: the vertical margin value of the inline element does not work.

B:margin elements of non-table types, as well as table-caption, table-cell and inline-table types of table types. For example, TD TR TH and so on, margin is not applicable.

C: margin in the vertical direction does not work for inline non-replacement elements, such as SPAN.

3. Outer margin folding (Collapsing margins)

Collapsing margins, or outer margin folding, refers to the merging of two or more adjacent outer margins (margin) into one outer margin. Margin folding must occur in a normal stream element.

The original intention of 3.1:Collapsing margins

The original purpose of Collapsing margins is to make the paragraphs look better. Take a typical text page consisting of several paragraphs as an example. The space above the first paragraph is equal to the upper margin of the paragraph. If there is no margin merge, the outer margin between all subsequent paragraphs will be the sum of the adjacent top and bottom margins. This means that the space between paragraphs is twice as large as that at the top of the page. If an outer margin merge occurs, the top and bottom margins between paragraphs are merged so that the distances are the same everywhere.

This picture is from W3C.

3.2:Collapsing margins Typ

3.2.1: margin overlap of sibling elements

XML/HTML Code copies content to the clipboard

CSS Code copies content to the clipboard

.container {

Width: 300px

Height: 300px

Margin-bottom: 10px

Background-color: lightpink

}

. an-container {

Width: 300px

Height: 300px

Margin-top: 10px

Background-color: lightgreen

}

3.2.2: margin overlap of parent and child elements

Two or more outer margins are not separated by non-empty content, padding, border, or clear.

These margin are in the normal stream.

Margin-top overlap: without being separated, the margin-top of an element is adjacent to the margin-top of the first child element (non-floating element, etc.) in its normal stream.

XML/HTML Code copies content to the clipboard

CSS Code copies content to the clipboard

.container {

Width: 150px

Margin-top: 10px

Background-color: lightpink

}

.container. An-container {

Background-color: lightgreen

Width: 100px

Height: 100px

Margin-top: 10px

}

Margin-bottom overlap: without being separated, its margin-bottom is adjacent to the margin-bottom of the last child element (non-floating element, etc.) in its normal stream only if the height of the parent element is "auto". That is, the height value of the parent element cannot be a fixed height value. If the parent element is of a fixed height, then margin-bottom will be invalid. The code is same as above.

3.2.3: the margin-bottom of the element itself will collapse when it is adjacent to the margin-top

XML/HTML Code copies content to the clipboard

After the above code runs, what we can say is the square with a red border, the width and height of the box should be 100px, and the height should not be 150px.

4. Calculation rules of folded margin

4.1The margin participating in folding is all positive.

XML/HTML Code copies content to the clipboard

A

B

When margin is positive, the higher value of margin is taken as the final margin value.

4.2The margin participating in folding is all negative.

XML/HTML Code copies content to the clipboard

A

B

When the margin is negative, the absolute value is larger, and then, from the zero position, the negative displacement.

4.3.There are positive and negative values in the margin participating in folding.

XML/HTML Code copies content to the clipboard

A

B

What if there are positive values in adjacent margin and negative values at the same time? There are positive and negative, first take the largest absolute value of the negative margin, and then add it to the largest margin of the positive margin value. In fact, it is just the addition of positive and negative.

In the above example, the final margin should be 100 + (- 50) = 50px.

5.Collapsing margins solution

The solutions are as follows:

A: floating elements, inline-block elements, margin of absolute positioning elements, and margin folding of other elements in the vertical direction (for sibling elements)

Note: floating elements, inline-block elements, and absolute positioning elements all belong to BFC elements.

B: the parent element of the block-level formatting context (BFC, blocking formatting context), such as overflow:hidden, is created without margin folding with its child elements (for parent-child elements).

C: adding one of the following to the parent element can avoid margin overlap. Such as adding content, add padding, add border.

Although there is a way to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner or outer margin with the specified width to the specified element, try to add the inner or outer margin to the parent and child elements of the element.

This is the end of the summary of CSS's knowledge of margin attributes. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.