Home > Developer > Web Develop
Css margin Folding (collapses margin)
A. Take a look at the definition of margin folding for a document:
In CSS, the adjoining margins of both or more boxes (which might or might is siblings) can combine to form a single mar Gin. Margins that combine this-is-said to collapse, and the resulting-combined margin is called a collapsed m Argin.
In CSS, the margins of adjacent boxes (which may or may not be sibling elements) can be merged into one margin. This combination of margins is called folding , which is called margin folding .
As an example:
<style type= "Text/css" >.TESTBFC{width:100px;Height:100px;Background-color:Green;}. TESTBFC Div{width:30px;Height:30px;Background-color:Pink; }. TESTBFC Div:first-child{Margin-bottom:10px;}. TESTBFC Div:last-child{Margin-top:10px;}</style><div class= "TESTBFC" > <div>div1</div> <div>div2</div></div>
The results of the operation are as follows. As we can see, Div1 's Margin-bottom and Div2 's Margin-top merged, resulting in only 10px between Div1 and Div2. We were supposed to be spaced between them 20px, how to achieve it? Can be added to Div1 's class: Display:inline-block. This involves how to solve or avoid the problem of margin folding.
Here's a look at the specific considerations for the document:
note The above rules imply that:
1. There is no folding between the floating box and the other boxes. (Even the floating box does not collapse between the elements of its normal flow). For example, an outer edge collapse occurs between a parent element and a child element in the following example, which can be displayed as normal if the parent element or child element is set to float.
<Head> <styletype= "Text/css"> *{margin:0;padding:0; }. TESTBFC{width:100px;Height:100px;Background-color:Green;Margin-top:10px; }. TESTBFC Div{width:30px;Height:30px;Background-color:Pink; }. TESTBFC Div:first-child{Margin-top:10px; } </style></Head><Body><Divclass= "TESTBFC"> <Div>Div1</Div></Div></Body>View Code
2. Create a new block formatting contexts (block-level format context) for the outer margin of the element so that it does not collapse with child elements in its normal stream. As in the above example, you can add an attribute to the outside Div Overflow:hidden
3. The absolutely positioned box does not collapse. In the example above, you can add attributes to the parent or child elements: position:absolute or fixed.
4. In a normal document flow, the bottom margin of the block-level element is folded back and the top margin of the sibling element behind it collapses, unless you set the clearance. See the example at the top of the article.
5. The top margin of the block-level element is collapsed with the top margin of the child element of its first block-level element, and if the block-level element does not have a top border, no top padding, the child element is not set clearance. Example: This example is already available in tip 1.
6. The bottom margin of a block-level element may have a margin collapse with the bottom margin of its last block-level child element, if the block-level element is not set bottom padding,bottom border and Height:auto, M in-height:0
7. Such a box will be folded outside, min-height:0, and not set top or bottom borders or top or bottom padding, and height:0 or auto and it does not contain line box and And all of its child elements are folded outside the margin.
For more information, please refer to the documentation: Http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Analysis of CSS margin folding (collapsed margin)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
