为什么这个CSS边缘顶部样式不工作?

我尝试在另一个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会这样。

当前回答

创建新的块格式化上下文

您可以在父元素上使用display: flow-root来防止在创建新的块格式化上下文时通过包含元素的边距崩溃。

将overflow属性的值更改为auto或使用flexbox将具有相同的效果。

https://codepen.io/rachelandrew/pen/VJXjEp

2021-02-22 11:30:11

其他回答

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

2012-03-06 18:34:15

试试这个:

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

好运！

2012-03-01 19:44:27

没有回答“为什么”(必须是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。

2012-03-01 16:28:40

重要的是，它会强迫一切:

margin:50px 50px 50px 50px !important;

2012-03-12 17:46:48