The margin attribute knowledge of CSS Important properties Introduction

The following sharing is my recent days after learning the margin knowledge, a great inspiration, feel the previous understanding of margin is simply too shallow. So write the following articles, one for their own ideas, and the other is to share knowledge, to avoid the margin of the property of the misunderstanding. Content may be a bit more, but are the essence, I hope you will be patient to learn.

The following sharing will be divided into the following sections:

A brief introduction to 1.margin properties

1.1: Margin percentage setting for normal streams

1.2: Margin percent setting for absolute positioning

2.margin elements that cannot be applied

3. Margin folding (collapsing margins)

3.1:collapsing Margins Original intention

3.2:collapsing margins Type

3.2.1: margin overlap of sibling elements

3.2.2: Margin overlap for parent-child elements

3.2.3: The Margin-bottom and margin-top of the element itself are collapsed when they are adjacent

4. Calculation rules for folded margin

4.1: The margin that participates in folding is positive

4.2: The margin that participates in folding is negative

4.3: There are positive values in the folded margin, negative

5.Collapsing Margins Solution

A brief introduction to 1.margin properties

Before introducing margin, a picture of the standard box model is first cut, so that readers can see the relevant location.

　　

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

The basic properties of margin have the following points

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

The B:margin value can be one of 3 of the width value, percent value, or ' auto '. Note that the margin must be in units of pixels, inches, millimeters, or EM.

The C:margin percent 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 upper and lower direction is 10px, the left and right direction is 20px; when Ma Rgin is margin:10px 20px 5px, the top direction is 10px, the left and right direction is 20px,bottom direction is 5px; when margin is margin:1px 2px 3px 4px, the top direction is 1px,right direction The 2px,bottom direction for the 3px,left direction is 4px.

With a brief introduction to margin, we know that the percent value of margin is calculated relative to the width of the parent element, but the calculation of the margin of the normal and absolute positioning elements is not the same.

1.1: Margin percentage setting for normal streams

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

<p class= "Container" >            <p class= "content" ></p>        </p>

. container {           width:300px;           height:300px;           Background-color:lightpink;           margin:10px;           Display:inline-block;   <!--Setting this value for a reason is explained below. -         -container. Content {           width:120px;           height:120px;           Background-color:lightgreen;           margin:10%;         }

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

Note that the value of themargin four azimuth is calculated from the width of the parent element!

　　1.2: Margin percent setting for absolute positioning

In an absolutely positioned element, if the parent element is set to relative/absolute/fixed, the margin percentage value is calculated based on the width of the parent element, and if the parent element has no set relative/absolute/fixed, the margin The percent value is calculated based on the width of the entire page.

. container {     width:300px;     height:300px;     Background-color:lightpink;     Display:inline-block;   }   . Container. Content {     width:120px;     height:120px;     Background-color:lightgreen;     Position:absolute;   /* Added change to this attribute */  margin:10%;   }

As you can see, the value of margin calculation is no longer 30px, but instead becomes 137px (My Computer page width is 1370px). This is because the child element container set the absolute, resulting in the child elements out of the document flow, the value of four azimuth is positioned according to the page, so the margin value will change. If you want the child element or parent element to be positioned, you can set one of the Relative/fixed/absolute values for the parent element so that the margin percentage is calculated as 30px, as with the margin in the normal stream. Students can try it out for themselves.

2.margin elements that cannot be applied

　　Having the following elements setting the margin value is not effective.

A: inline element vertical Margin value does not work.

B:margin non-table type elements, and table type Table-caption, Table-cell, and inline-table 3 classes. such as TD TR TH, margin is not applicable.

C: A vertical margin does not work for inline non-replacement elements (for example, SPAN).

3. Margin folding (collapsing margins)

collapsing margins, or margin folding, means that two or more adjacent margins (margin) are merged into one margin. Margin folding must occur in normal flow elements.

　　3.1:collapsing Margins Original intention

Collapsing margins's intention was to make the paragraph appear more attractive. Take the example of a typical text page consisting of several paragraphs. The space above the first paragraph equals the upper margin of the paragraph. If there is no margin merge, the margins between all subsequent paragraphs will be the same as the top margin and the bottom margin. This means that the space between the paragraphs is twice times the top of the page. If a margin merge occurs, the top and bottom margins between the paragraphs are merged together, so that the distances are consistent.

This figure comes from the

3.2:collapsing margins Type

　　　　3.2.1: margin overlap of sibling elements

<p class= "Container" ></p> <p class= "An-container" ></p>

. 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 for parent-child elements

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

These margin are in the normal stream .

　　　　　　margin-top overlap : In the absence of separation, 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.

<p class= "Container" >            <p class= "An-container" ></p>        </p>

. 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 : In the case of not being separated, only if the parent element's height is "auto", its margin-bottom will be the same as the last child element in its normal stream (non-floating element, etc.). Margin-bottom adjacent. This means that the height value of the parent element cannot be a fixed height value. If the parent element is fixed height, then Margin-bottom will not be valid. Code ibid.

　　　　3.2.3: The Margin-bottom and margin-top of the element itself are collapsed when they are adjacent

<p style= "border:1px solid red; width:100px; " >     <p style= "margin-top:100px;margin-bottom:50px;" ></p> </p>

After running the above code, we can get a red border square, the width of the box should be 100px, height should not be 150px.

4. Calculation rules for folded margin

4.1: The margin that participates in folding is positive

<p style= "height:50px; margin-bottom:50px; width:50px; background-color:red; " >A</p> <p style= "height:50px; margin-top:100px; width:50px; Background-color:green; " >B</p>

In the case where margin is positive, the value of which margin is greater is the final margin value.

　　4.2: The margin that participates in folding is negative

<p style= "height:100px; margin-bottom:-75px; width:100px; background-color:red; " >A</p> <p style= "height:100px; margin-top:-50px; margin-left:50px; width:100px; Background-color:green; " >B</p>

When margin is negative, it takes a large absolute value, then, from 0 position, negative displacement.

　4.3: There are positive values in the folded margin, negative

<p style= "height:50px; margin-bottom:-50px; width:50px; background-color:red; " >a</p><p style= "height:50px; margin-top:100px; width:50px; Background-color:green; " >B</p>

What if there is a positive value in the adjacent margin and there is a negative value? There is a positive negative, the largest of the absolute value in the negative margin is taken out first, and then the largest margin in the positive margin is added. In fact, it is the addition or minus.

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

5.Collapsing Margins Solution

The workarounds are as follows:

A: The margin of the floating element, inline-block element, absolute positioned element, and margin collapse of other elements in the vertical direction (for sibling elements)

Note: The floating element, the Inline-block element, and the absolutely positioned element are all part of the BFC element.

B: The parent element of the block-level formatting context (BFC, blocking formatting context) is created, such as Overflow:hidden, which does not have a margin collapse with its child elements (for parent-child elements).

C: Margin overlap can be avoided by adding one of the following to the parent element. Add the padding, add the border if you added the content.

Although there are ways to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding padding or margins with the specified width to the specified element , try adding padding or margins to the element's parent and child elements.

Above this CSS important attributes of the margin attribute knowledge integration (Must SEE) is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.