我尝试在另一个div内的一个div上添加边缘值。所有工作都很好,除了顶部值,它似乎被忽略了。但是为什么呢?

我的期望是:

我得到的是:

代码:

#{外 宽度:500 px; 身高:200 px; 背景:# FFCCCC; Margin: 50px auto 0 auto; 显示:块; } #{内部 背景:# FFCC33; Margin: 50px 50px 50px 50px; 填充:10 px; 显示:块; } < div id = "外" > < div id = "内部" > 你好世界! < / div > < / div >

W3Schools没有解释为什么margin会这样。


当前回答

如果你有一个边际崩溃的问题,那么解决这个问题,你可以添加 显示:flow-root;到父容器。

除此之外,如果margin-top被忽略,尝试margin-top的负值,例如:margin-top: -2px;

其他回答

我想将#inner div的位置属性设置为相对也可以帮助实现这个效果。但无论如何,我尝试了粘贴在IE9和最新的谷歌Chrome浏览器上的问题的原始代码,他们已经给出了理想的效果,没有任何修改。

不知道为什么你没有工作,但你可以添加overflow: auto;到外部div。

外部div使用padding-top:50px,如下所示:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

注意:填充会增加你的div的大小。在这种情况下,如果你的div的大小很重要,我的意思是如果它必须有一个特定的高度。降低高度50px:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

如果你有一个边际崩溃的问题,那么解决这个问题,你可以添加 显示:flow-root;到父容器。

除此之外,如果margin-top被忽略,尝试margin-top的负值,例如:margin-top: -2px;

如果你给#outer添加任何填充,它就可以工作。演示:

#{外 宽度:500 px; 身高:200 px; 背景:# FFCCCC; Margin:50px auto 0 auto; 显示:块; padding-top: 1 px; } #{内部 背景:# FFCC33; Margin:50px 50px 50px 50px; 填充:10 px; 显示:块; } < div id = "外" > < div id = "内部" > 你好世界! < / div > < / div >