Маржа внутренней Div влияет на внешний DIV

Question

У меня есть три вложенных элементов DIV, как это:

<div id="outer"> 
    <div id="innerA"> 
     <div id="innerB"> 
      This<br/>is<br/>a<br/>multiline<br/>testcase.<br/> 
      This<br/>is<br/>a<br/>multiline<br/>testcase.<br/> 
     </div> 
    </div> 
</div> 

#innerA имеет высоту 100%, что делает его столь же большим, как #outer. Высота #innerB оставлена ​​равной auto, поэтому она становится такой же высокой, как и ее содержимое. Теперь, когда я установил #innerB, чтобы иметь margin-top: 10px, например, я ожидал бы, что #innerB получит маржу по отношению к #innerA. Вместо этого происходит то, что #innerA получает этот запас по отношению к #outer.

Как это возможно? Похоже, что это не имеет никакого отношения к box-sizing, по крайней мере, его невозможно устранить.

Вот CSS:

#outer { 
    width: 500px; 
    height: 300px; 
    background: yellow; 
    overflow: auto; 
} 

#innerA { 
    width: 100%; 
    height: 100%;  
    background: green; 
} 

#innerB { 
    margin-top: 10px; 
    background: blue; 
} 

и скрипку:

http://jsfiddle.net/7e2H5/

(Здесь я бы ожидать, что зеленый ДИВ подходит желтый один, и что есть 10px из зеленого один видимый над синим DIV).

Answer 1

Похоже, что это проблема «смятия маржи». Проверьте DEMO

Я добавил padding: 1px 0;

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Просто нашел это: margin-top in a nested div

Answer 2

я заменил бы #innerb запас с #innera обивка

Answer 3

Это интересно, но я бы не сказал, что добавление отступы является более соответствующий ответ.

#innerA { 
    width: 100%; 
    height: 100%;  
    background: green; 
    display: inline-block; 
} 

Это a demo на JSFiddle.

Надеюсь, это поможет!

Answer 4

По ссылке, предоставленной Mozilla Крис, добавляя поплавки также предотвращает края от разрушения:

Добавить float: left; в #innerA, как показано на этой скрипке: http://jsfiddle.net/7e2H5/10/

См: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing