为什么负边距会影响我的页面宽度？答案

【问题标题】：Why do negative margins affect my page width?为什么负边距会影响我的页面宽度？
【发布时间】：2011-08-07 02:18:30
【问题描述】：

请参考以下example：

在其中，一个 200px 宽的外部 div 用于确定我们的页面宽度。它包含一个 400 像素宽的内部 div，但左/右负边距为 -100 像素。

我的预期最终结果是浏览器将总内容宽度注册为 200 像素，而不是 400 像素，但一旦窗口大小调整到小于 400 像素，就会显示水平滚动条。这是怎么回事？

【问题讨论】：

【解决方案1】：

负边距不会调整div 的宽度。负的左边距会将div 移动到它在页面流中的位置的左侧，而负的右边距将允许其他元素与div 的右侧重叠边距的量。

希望您能在this jsFiddle 中看到我的意思。

从您的问题看来，您需要 overflow: hidden 将一个大的 div 包含在一个较小的 div 中，而不会超出其边界。

【讨论】：

【解决方案2】：

Gareth 的回答是正确的。即使有负边距，div 仍然是标准页面流的一部分，在布局方面不会被忽略。出于滚动目的，不能忽略正版页面内容。

但是，如果您这样做是为了美观，例如在页面两侧有一个超出最大宽度的阴影，则可以通过背景来实现 - this question 应该会有所帮助。

【讨论】：

【解决方案3】：

正如 Gareth 已经提到的，边距不会影响盒子的大小。解决方案相当简单。外部容器需要为 400px，这将触发水平滚动条。内部容器需要为 200 像素，左右边距为 100 像素。当您调整窗口大小时，一旦您变得比外部容器小，滚动条就会出现。

【讨论】：

@Brent- 这不是我想要完成的。重点是我希望滚动条仅在 200px 宽度处触发，并在 400px 宽度处被忽略，尽管看起来这可能是不可能的......
嗯。那为什么要把任何东西都设置为 400px 呢？如果您只想要 200px 的滚动条，则将包装器设为该大小。你应该更新你的问题，这样它就不会说你希望它们在 400 像素，所以看到这个的任何其他人都不会感到困惑。
@Brent- 这是为了有一个不影响布局的溢出背景。无论如何，我不是在寻找替代解决方案，只是解释在这种情况下，负边距如何影响布局。
啊，这更有意义。感谢您的澄清。

【解决方案4】：

尝试将其添加到您的 CSS...

body {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

【讨论】：