In CSS, the "margin" of an element does not affect the "height" of its parent?

Question

Below is a snippet ( demo on JSFiddle )

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    background-color: red;
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>

Run codeHide result

As you can see from the demonstration, the element #innerhas margin-bottom.

I expected the height to #outerbe large enough to include the outline of the marker #inner. The output will be a red bar below the yellow bar .

However, I found that the height #outerdoes not change at all, although I added a rule margin-bottom: 50pxfor #inner.

Does anyone have any ideas about this? And is there a way to ensure that the content area of ​​the parent is large enough to hold the outline of its child field?

, , , /. .

!

Answer 1

, , .

() , , , , , .

.

, , , , max-height, margin-bottom , . .

div, , . , :

#inner { background-color: yellow; margin-left: 50px; margin-bottom: 50px; }
#outer { background-color: red; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>You can see the collapsed margin above this text outside of the parent div.</p>

Hide result

: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

---

?

ref . div - border, padding, height, min-height max-height.

- div:

#outer { background-color: red; border: 1px solid gray; }

, div .

#outer { background-color: red; padding-bottom: 50px; }

< > :

Fiddle ( ): http://jsfiddle.net/abhitalks/rrtfhyky/1/

Fiddle ( ): http://jsfiddle.net/abhitalks/rrtfhyky/2/

( ):

#inner { background-color: yellow; margin-left: 50px; }
#outer { background-color: red; padding-bottom: 50px; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>Some text that follows.</p>

Hide result

Answer 2

, overflow: auto #outher div,

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    overflow: auto;   /* ADDED */
    background-color: red;
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>

Hide result

Answer 3

Add This CSS

#inner {
    background-color: yellow;
    margin-left: 50px;
    margin-bottom: 50px;
    display: inline-block;
}

Answer 4

"", , , div:

• :

  #inner {
      background-color: yellow;    
  }
  #outer {
      background-color: red;
      padding-left: 50px;
      padding-bottom: 50px;
  }
  

3 :

2. By @Jenti Dabhi - display:inline-block div #inner:

   #inner {
       background-color: yellow;
       margin-left: 50px;
       margin-bottom: 50px;
       display: inline-block;
   }
   

3. By @Chris - overflow: auto div #outer:

   #outer {
       overflow: auto;
       background-color: red;
   }
   

4. By @Abhitalks - border #outer div:

   #outer {
       background-color: red; border: 1px solid gray;
   }
   

Answer 5

div:

#inner {
    background-color: yellow;    
    margin-left: 80px;
    margin-bottom: 50px;
     
}
#outer {
    background-color: red;
    border:1px solid white;
      
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>

Hide result

Answer 6

This is a typography concept, usually the vertical edges of adjacent elements collapse!

Look at the article