当子元素水平溢出时，为什么忽略父元素的右边填充？ [英] 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; 
} 
  

在线演示：问题。

我会解决它给孩子的边际（而不是父母的填充）：

  #parent {
 width： 200px; 
 height：200px; 
 overflow-x：scroll; 
 background：gray; 
} 
 
 #child {
 width：500px; 
 background：yellow; 
 display：inline-block; 
 margin：20px; 
} 
  

演示： jsFiddle

Given this simple structure:

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

with this CSS:

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

#child {
    width: 500px;      
}

Live demo: http://jsfiddle.net/523me/5/

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)?

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

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.)

解决方案

You're suffering from this problem.

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; 
}

Demo: jsFiddle

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