web-dev-qa-db-ja.com

子要素が水平方向にオーバーフローするとき、親の右パディングが無視されるのはなぜですか？

この単純な構造を考えると：

<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/

親には20pxパディングと、子が水平にオーバーフローする（幅が広いため）。親を右端までスクロールすると、子が親の右端に触れていることがわかります。

したがって、親には正しいパディングが必要ですが、無視されます。子の幅が固定されている場合、親の右パディングが適用されないようです。 （これは規格で指定されていますか？知りたいです。何か見つけたらお知らせください！）

このシナリオで適切なパディングを適用する方法はありますかなし（フロートまたは配置によって）フローから要素を削除する必要がありますか？

enter image description here

スクリーンショット1-右側のパディングは無視されます。これが現在のすべてのブラウザの動作です。

スクリーンショット2-右側のパディングが適用されます。これは私が達成しようとしていることです。 （ところで、スクリーンショットはIE7からのものです。これは、正しいパディングを無視しない唯一のブラウザーです。）

htmlcssbrowseroverflow
51
Šime Vidas

あなたは this 問題に苦しんでいます。

私はそれを子供にマージンを与えることで解決します（親へのパディングではありません）：

body {
  padding: 2em;
}

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

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}
<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
25
Joao

Dunnoが追加：

#child{
  display: inline-block;
}

それを修正するようです： http://jsfiddle.net/523me/6/

私は最新のChromeでのみテストしましたが、クロスブラウザではない可能性があります

5
stephenmurdoch

いいえ、パディングは無視されませんが、パディング内にあります。

pdated jsFiddle を参照してください。パディングが元の位置から移動していないことがわかります。

編集：うーん、いくつかの異常があります。内部divに右マージンを与えると、それも無視されます。うーん。あなたの質問に賛成票を投じます。

4
Mr Lister

パディングをボーダーに変更する場合があります。

padding: 20px;

に

border: 20px solid gray;
2
Circle B

オーバーフローしている要素自体にpadding-rightを適用し、その直接の子要素に背景を移動します。

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

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

0
Marat Tanalin