html - CSS 右边距在带有溢出滚动的 Div 内不起作用

Question

我正在尝试制作两个 div，一个在另一个里面。内div大于外div，外div有overflow:scroll , 内部 div 有 margin:25px .所以我这样做:

#outer {
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    width: 400px;
    height: 200px;
    margin: 25px;
}

...

<div id="outer">
    <div id="inner">

    </div>
</div>

内部 div 没有像预期的那样一直有 25px 的边距，而是在三边有 25px 的边距，但在右侧没有。在我看来，这是非常违反直觉的。

如果我添加一个宽度足够大的中间 div 以包含内部 div + 50px，我们可以使它看起来正确，但这似乎是一个hacky 解决方法。

请参阅我在 JSFiddle 上的示例: http://jsfiddle.net/d3Nhu/16/

这在每个主要浏览器中都以相同的方式发生。这种行为有什么好的理由吗？根据 CSS 规范，这是正确的行为吗？

注意:正如您在本示例中所期望的那样，如果您使用 overflow:auto 没有区别。而不是 overflow:scroll .

编辑 :请注意，我不是在寻找解决此行为的方法。 (我已经找到了。)我正在寻找有关这种行为的原因的任何见解，特别是如果它记录在 CSS specification 中的话。任何地方。

Answer 1

特尔；博士:
边距用于将元素从包装器移入，而不是向外扩展包装器。
长解释:
此行为与指定 width 一致。除了水平margin文档中的任何位置。要分解它，请考虑以下代码段，其中我指定了一个没有 overflow 的包装器属性(property)，以及 margin不展开包装元素。

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

<div class="outer">
    <div class="inner">
        
    </div>
</div>

如您所见， margin没有导致包装器的尺寸扩大，元素只是继续溢出。此行为记录在 CSS 2.1 规范中记录的可视化格式模型详细信息下。
摘自“ Block-level, non-replaced elements in normal flow”的“ Visual formatting model details”部分:

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

[...]
如果上述所有值都具有除 'auto' 以外的计算值，则这些值被称为“过度约束”，并且使用的值之一必须与其计算值不同。如果包含块的 'direction' 属性具有值 'ltr'，则忽略指定的 'margin-right' 值并计算该值以使等式成立。如果 'direction' 的值是 'rtl'，这会发生在 'margin-left' 上。

这段摘录相当密集，所以简单地说，让我们忽略 border 的宽度。和 padding , 两者都是 0 , 留给我们 width , margin-left , 和 margin-right .
现在因为你有一个固定的 width和 margin-left 的值和 margin-right ，这些值是“过度约束”的。现在在我们的例子中，因为方向是 ltr默认情况下， margin-right被迫补偿。
要查看方向的效果，让我们尝试添加 dir="rtl"属性到包装元素。

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

<div class="outer" dir="rtl">
    <div class="inner">
        
    </div>
</div>

现在元素向左溢出。让我们看看这个 dir="rtl"属性对您的 overflow: scroll 具有相同的影响例子。

#outer {
    border: 1px solid #00F;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    border: 1px solid #F0F;
    margin: 25px;
    width: 400px;
    height: 200px;
}

<div id="outer" dir="rtl">
    <div id="inner">
    
    </div>
</div>

是的，确实如此。现在左边缺少边距，而不是右边。
但为什么不 overflow: scroll包括边距？
主要是因为规范没有说它应该。让我们来看看 overflow 的 CSS 2 规范属性(property)。
摘自“ Overflow and clipping”的“ Visual effects”部分:

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

看看它是如何具体说“剪掉的内容”的。有关“内容”的解释，请引用 CSS 2 规范中的下图。
图片来自“ Box dimensions”的“ Box model”部分:

正如我们所见， margin与 content 分开.但是，此时值得注意的是滚动区域中包含填充和边框，因此当规范说“内容”时，它可能指的是边框框，或者至少，这似乎是它的解释方式。
为什么 display: inline-block工作？
基本上，边距在 inline-block 上的表现有所不同。元素，因为它们是内容级别而不是块级别，并且它们没有“过度约束”的概念。