我尝试在另一个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会这样。
当前回答
外部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;}
其他回答
不知道为什么你没有工作，但你可以添加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;}
创建新的块格式化上下文
您可以在父元素上使用display: flow-root来防止在创建新的块格式化上下文时通过包含元素的边距崩溃。
将overflow属性的值更改为auto或使用flexbox将具有相同的效果。
https://codepen.io/rachelandrew/pen/VJXjEp
不太清楚为什么，但改变内部CSS为
display: inline-block;
似乎有用。
重要的是，它会强迫一切:
margin:50px 50px 50px 50px !important;
