我尝试在另一个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会这样。
当前回答
试试这个:
#{外 宽度:500 px; 身高:200 px; 背景:# FFCCCC; Margin:50px auto 0 auto; 显示:表; ｝ #{内部 背景:# FFCC33; Margin:50px 50px 50px 50px; 填充:10 px; 显示:块; ｝ < div id = "外" > < div id = "内部" > 你好世界! < / div > < / div >
好运！
其他回答
不太清楚为什么，但改变内部CSS为
display: inline-block;
似乎有用。
我想将#inner div的位置属性设置为相对也可以帮助实现这个效果。但无论如何，我尝试了粘贴在IE9和最新的谷歌Chrome浏览器上的问题的原始代码，他们已经给出了理想的效果，没有任何修改。
只是为了快速修复，尝试像这样将子元素包装成div元素-
<div id="outer">
<div class="divadjust" style="padding-top: 1px">
<div id="inner">
Hello world!
</div>
</div>
</div>
内部div的边距不会因为外部和内部div之间1px的填充而崩溃，所以逻辑上你会有1px的额外空间以及内部div的现有边距。
如果你给#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 >
如果你有一个边际崩溃的问题，那么解决这个问题，你可以添加 显示:flow-root;到父容器。
除此之外，如果margin-top被忽略，尝试margin-top的负值，例如:margin-top: -2px;
