CSS右边距不内一个div溢出滚动工作(CSS Right Margin Does Not Work

我试图让两个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>

相反，具有25px的所有的方式周围保证金内的div的预期，有三面25px的利润，但右侧有没有。 这在我看来是非常反直觉的。

如果我加一个中间的div的宽度足够大的宽度包含在内DIV + 50像素，我们可以把它看的权利，但是，似乎是一个哈克解决方法。

见我在的jsfiddle例如： http://jsfiddle.net/d3Nhu/16/

这发生在每一个主要的浏览器一样。 有没有什么好的理由的行为呢？ 这是正确的行为根据CSS规范？

注：正如你在这个例子中预计，这都没有区别，如果你使用overflow:auto ，而不是overflow:scroll 。

编辑 ：请注意，我不是在寻找一个此行为的解决方法。 （我已经找到了一个。）我正在寻找任何见解，以供这种现象的原因 ，特别是当它在记录CSS规范的任何地方。

Answer 1:

TL; DR：

利润率是用于从包装中移动的元件，而不是向外扩大包装。

长解释：

此行为与指定一致的width ，除了水平margin在文档中的任意位置。 要打破它，考虑下面的代码片段，在那里我特异性的包装没有overflow属性和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规范将被记录在案可视化格式模型的细节记录。

从摘录“ 块级，非替换在正常流动的元件 ”的“部分的视觉格式模型细节 ”：

下面的约束必须在其它性质的使用值之间成立：

“保证金左” +“左边框宽度” +“填充左” +“宽度” +“填充右” +“右边框宽度” +“保证金右”包含块的宽度=

[...]

如果上述所有的具有比“自动”以外的计算值，是所述的值被“过度约束”和所使用的值中的一个将必须是从它的计算出的值不同。 如果包含块的“方向”属性的值是“LTR”，的“余量 - 右”的指定值被忽略，并且值被计算，以使平等真。 如果“方向”的值是“RTL”，发生这种情况，“保证金左”代替。

这摘录相当密集，所以简单，让我们忽略的宽度， 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包括利润？

主要是因为规范没有说明它应该。 让我们来看看CSS 2规范的overflow属性。

从“摘录溢出和剪裁的”“部分视觉效果 ”：

当计数器溢出时，将“溢出”属性指定的盒是否被夹到其填充边缘，如果有的话，是否提供滚动机制来访问任何切出的内容。

怎么看呢明确写着“剪切掉的内容”。 对于“内容”的说明，可以从CSS 2规范参考以下图形。

从“图形包装盒尺寸的”的“节盒模型 ”：

正如我们所看到的， margin是由单独的content 。 然而，在这一点上，值得注意的是，填充和边框都包含在滚动区域，所以当该规范说“内容”，很可能指的是边界框，或者至少，这似乎是它是如何解释。

为什么display: inline-block工作？

基本上，利润率表现不同的inline-block元素，因为它们是内容层面，而不是块级，和他们没有被“过度约束”的概念。

Answer 2:

添加display:inline-block; 到#inner DIV

看到这个小提琴

Answer 3:

因此，这里的答案实际上不解决问题！ （虽然超详细的原因，它不工作）

我需要一个解决方案。 下面是我对未来的读者。 使用的组合display:flex; 与伪::元件伪造一个div的存在，以提供所需的余量之后。

 .wrapper { display: flex; width: 400px; height: 100%; padding: 40px; background: lightGrey; } .lists_container { display: flex; flex-direction: row; justify-content: flex-start; overflow: auto; position: relative; background: grey; padding: 40px; margin: 40px; width: 100%; } .card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 250px; max-width: 500px; height: 100px; margin: 50px 0; padding: 20px; background: orange; margin-right: 30px; } .card.last::after { content: ''; position: absolute; right: -100px; width: 40px; height: 100%; background: red; } 

 <div class="wrapper"> <div class="lists_container"> <div class="card"> </div> <div class="card"> </div> <div class="card last"> </div> </div> </div> 

文章来源: CSS Right Margin Does Not Work Inside a Div With Overflow Scroll