Question

我有一个 < code@ lt; div id = " wrapper" & gt; & lt;/ div> 和

#wrapper {
    height: 300px;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}

当我为显示水平滚动条而调整视图端时,右边距会消失;我只能在元素内容上向右滚动,但我希望边边边都有边距。如果 < code>right: 0; 被应用,也发生在 < em> left 边距上,如果浏览端缩短,则在 < em> bottom 边距上。给 < code> wrapper a < code> position: st定; (默认) 没有任何区别。

为什么会这样呢?它跟不上正常的" http://www.w3.org/TR/CSS21/box.html#collabing-margins" rel=“nofollow”>margin 崩溃规则。我怎么能拿回我的利润?我试过给身体垫/margin.nada。

jsFiddle

Answer 1

Background Info

body 元素的默认宽度为 > body 元素的默认宽度是 html 宽度, 也是窗口宽度( 或 iframe 宽度)。区块级元素的默认行为是, 卷轴只计算实际元素的默认宽度( 因此, 如果右侧没有更多显示, 它并不关心右侧边距 ) 。这导致您的右边问题。 (根据 < a href=" http://phrogz. net/ css/ htmlvsbody. html" rel= " nofol" > 此条 , 滚动条实际上出现在 html 元素上, 而不是正上。)

For `Position: Absolute`

通过拥有和 position: 绝对 , body 元素以零高度结尾。这导致您在此情况下的底边距问题。

a subject 表示边际值( 见小提琴 :

body {
    min-height: 320px;
    min-width: 420px; 
}

这将给 body 设定一个最小尺寸,等于绝对元素的宽度+边距和高度+边距。

现在,我不知道如果你有 right: 0 set, 强迫左边距“ 剩余” 只会导致在我看来过早的滚动条启动。见< a href="http://jsfiddle.net/ARf8x/10/" rel=“ no follow” > 这个小提琴。

Regarding `Position: Static`

默认的区块级别行为可以通过强制使用身体元素上的缩写- wrap行为来改变( :

body { display: inline-block; }

注意: body {浮动:左;/code>没有给我同样的缩写- wrap行为()。



in-inline block  元素将计算其内部元素的边距,以确定其自身的宽度,从而允许正确的边距工作。

display: inline-block; 溶解方法对 (code>position) 无效: 绝对 是因为它使 body 具有零宽度和高度, 因为绝对定位使该元素脱离流动, 而 body 内没有留下任何能赋予其维度的东西。

以上目前仅在IE9上测试。

Answer 2

恐怕只有一个简单而快速的解决方案, 那就是在包装Div内创建一个新的Div。

http://jsfiddle.net/QHKmN/2/" rel=“no follow" >http://jsfiddle.net/QHKmN/2/

CSS 安保部

#wrapper {
    background: black;
    height: 300px;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}

#inwrapper {
    background: green;
    height: 290px;
    margin: 5px auto;
    position: relative;
    width: 390px;
}

HTML :

<div id="wrapper">
    <div id="inwrapper">

    </div>
</div>

还有你的底线

Background Info

For Position: Absolute

Regarding Position: Static

友情链接

For `Position: Absolute`

Regarding `Position: Static`