margin border folding is and what the solution

What margin fold is a border?

Boundary means that when folding the two vertical margins met at this time is not equal to two margins are added, but rather, the two outer distance larger value, the boundary margin folding occurs only in one of the BFC.

boundary margin folding solution

margin Border overlay will only appear in the general flow of the document, so you can trigger the BFC to resolve.
Used padding instead of margin or increase in border value.

What BFC that? What features are?

BFC - block formatting context

Refer to the MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

How to create a BFC

Root element (<html>)
Floating elements (float element is not none)
Absolutely positioned elements (position element is absolute or fixed)
Inline block elements (display elements is inline-block)
Table cell (display element is table-cell)
Table caption (display elements for table-caption)
Anonymous table cell element
overflow value is not visible block elements
display elements of the value of the flow-root

emmm ~~~~ it seems a bit empty Oh excluded

Examples enrich it to the point about it!

Folding problem solving margin border - a BFC

<div class='d1'>11</div>
<div class='d2>22</div>

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background: #f00;
        margin-bottom: 40px;
    }
    .d2 {
        width: 100px;
        height: 100px; 
        Background : # 0f0 ; 
        margin-Top : 50px ; 
    } 
</ style > 

// At this point will produce a folded margin boundary envisaged between the two adjacent intervals should div 
// 90px, actually only 50px;

Solution is to speak from a two div split into two in BFC BFC

<div class='d1'>11</div>
<div class='d2-outer'>
    <div class='d2>22</div>
</div>

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background: #f00;
        margin-bottom: 40px;
    }

    .d2-outer {
        overflow : hidden ;   conditions generating the BFC //
     } 

    .D2 { 
        width : 100px ; 
        height : 100px ; 
        background : # 0f0 ; 
        margin-Top : 50px ; 
    } 


// At this time reached contemplated, .d1 .D2 and two spaced div 90px;

　　2. Look at an example of the way - BFC internal floated elements do not run ~~

// Now a package with a child element of the parent element
 < div class = 'Outer' > 
    < div class = 'Inner' > </ div > 
</ div > 

< style > 
    .outer { 
        min-height : 100px ; 
        border : 10px Red Solid ; 
    } 

    .inner { 
        background : Green ; 
        widht : 300px by ; 
        height : 100px ; 
    }

// at this time it is a normal document flow, so the parent element wrapped child elements, everything is so smooth sailing

Once a child element can increase a float or position: absolute, so that the child element out of the document flow, so the parent element will collapses

Solution which can MDN reference example

So now we have to modify the code

<div class='outer>
    <div class='inner></div>
</div>

<style>
        .out {
            border: 10px solid red;
            min-height: 20px;
            overflow: auto;
        }
        .inner {
            height: 100px;
            width: 300px;
            background: green;
            float: left;
        }
</style>

margin border folding is and what the solution

Guess you like