当一个子元素水平溢出，为什么父的右填充忽略？ [英] When a child element overflows horizontally, why is the right padding of the parent ignored?

问题描述

鉴于这种简单的结构：

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

这个CSS：

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

现场演示： http://jsfiddle.net/523me/5/

注意，家长有一个 20像素填充和孩子水平溢出（因为它是更广泛的）。如果所有的方式滚动父母的权利，你会看到孩子接触到家长的右边缘。

Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.

因此​​，家长应该有一个正确填充，但它被忽略。看来，当孩子有一个固定的宽度，父权填充不适用。 （这是一个标准的规定？我很想知道。请让你发现了什么我知道！）

So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)

有没有办法迫使右填充在这种情况下要应用的没有的有（浮动或定位），以消除任何从流的元素？

Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?

截图1 - 正确的填充被忽略。这是目前所有的浏览器的行为。

Screenshot 1 - The right padding is ignored. This is how all current browsers behave.

截图2 - 正确的填充适用。这就是我试图完成。 （顺便说一句，该截图是从IE7，这是不忽视右填充唯一的浏览器。）

Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)

推荐答案

您是从患此的问题

我想解决这个问题给予保证金孩子（而不是填充父）：

I would solve it giving the margin to the child (and not the padding to the parent):

#parent {
    width: 200px;
    height: 200px;
    overflow-x: scroll;
    background: gray;
}

#child {
    width: 500px;
    background: yellow;  
    display: inline-block;
    margin: 20px; 
}

演示：的jsfiddle

这篇关于当一个子元素水平溢出，为什么父的右填充忽略？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！