我尝试在另一个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会这样。
当前回答
不知道为什么你没有工作，但你可以添加overflow: auto;到外部div。
其他回答
不知道为什么你没有工作，但你可以添加overflow: auto;到外部div。
如果你有一个边际崩溃的问题，那么解决这个问题，你可以添加 显示:flow-root;到父容器。
除此之外，如果margin-top被忽略，尝试margin-top的负值，例如:margin-top: -2px;
尝试使用display: inline-block;在内部div上，就像这样:
#outer {
width:500px;
height:200px;
background:#FFCCCC;
margin:50px auto 0 auto;
display:block;
}
#inner {
background:#FFCC33;
margin:50px 50px 50px 50px;
padding:10px;
display:inline-block;
}
没有回答“为什么”(必须是w/边距折叠的东西)，但似乎最简单/最合乎逻辑的方法来做你正在尝试做的事情，将只是添加padding-top到外部div:
#{外 宽度:500 px; 身高:200 px; 背景:# FFCCCC; Margin:50px auto 0 auto; padding-top: 50 px; ｝ #{内部 背景:# FFCC33; Margin:0px 50px 50px 50px; 填充:10 px; ｝ < div id = "外" > < div id = "内部" > 你好世界! < / div > < / div >
注意:没有必要将div设置为display:block;除非你的代码中有其他东西告诉它不是block。
不太清楚为什么，但改变内部CSS为
display: inline-block;
似乎有用。
