内Div的边缘影响外div [英] Margin of inner Div affects outer div

问题描述

我有三个嵌套的DIV元素：

I have three nested DIV elements like this:

<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 c $ c> 100％这使它像 #outer 一样大。 #innerB 的高度为 auto ，因此它的内容高度。现在当我设置 #innerB 有 margin-top：10px 例如，我会期望 #innerB 将获得与 #innerA 相关的保证金。而是 #innerA 获得与 #outer 相关的保证金。

#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.

这是怎么可能的？看起来这与 box-sizing 无关，至少它不能以这种方式修复。

How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.

这里是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/

（这里我希望绿色DIV符合黄色，并且在蓝色DIV上方有10px的绿色DIV）。

(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).

推荐答案

似乎这是一个Margin collapsing的问题。检查演示

Seems like it's a "Margin collapsing" problem. Check the DEMO

我添加了 padding：1px 0 ;

更多信息： https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin_collapsing

刚刚发现： margin-top嵌套div < a>

Just found this: margin-top in a nested div

这篇关于内Div的边缘影响外div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！