我尝试在另一个div内的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: block;
}Run Code Online (Sandbox Code Playgroud)
<div id="outer">
<div id="inner">
Hello world!
</div>
</div>Run Code Online (Sandbox Code Playgroud)
W3Schools没有解释为什么保证金的行为方式.
有没有办法完全禁用边缘折叠?我发现的唯一解决方案(名称为"uncollapsing")需要使用1px边框或1px填充.我发现这是不可接受的:无关的像素使计算变得复杂,没有充分的理由.是否有更合理的方法来禁用此边距折叠?
是否overflow:hidden适用<body>于iPhone Safari?似乎没有.我无法在整个网站上创建一个包装器来实现这一点......
你知道解决方案吗?
示例:我有一个长页面,只是我想要隐藏"折叠"下面的内容,它应该适用于iPhone/iPad.
http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为?
如何叠加两个全屏背景(例如,背景颜色和半透明图像?)
我很难掌握嵌套元素中垂直边距折叠的概念.我在http://www.howtocreate.co.uk/tutorials/css/margincollapsing上发表了一篇文章,解释它是如何工作的,但是对它的解释感到困惑.所以在它的例子中它引用了如下2个元素
<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
看到内部div的边距为20px,这将适用于整个代码块.令我困惑的是之后的一切,还没有看到Internet Explorer 7的问题.是否有人能够以简化的方式解释它以获得CSS的完整新手?