スパンパディングがレンダリングボックスをその親とオーバーラップさせるのはなぜですか？

私は何が起こっているのか理解しています。しかし、なぜ私は理解していない。 spanの新しい高さを考慮してdivのサイズを増やさないのはなぜですか？

display: inline-block私はこれを実現したいと思っていますが、inlineの背後にある理由は親コンテナのサイズを増やすことができません。

あなたのURLを

div, span { border: 1px solid gray; }

を修正するためにあなたが探している機能がある場合

は少し間違っています。そのはず。 http://jsfiddle.net/FrJRA/1 – scottheckel

ありがとうございます！一定。 –

"なぜdivのサイズが大きくなっていないのですか"なぜそれが必要ですか？ – BoltClock

インライン要素は、左/右の寸法のパディングの寸法のみを変更します。これは、要素の上下方向の寸法を増加させません。だからこそ、あなたはそれを側面ではあるが上端/下端ではないことに気づくのです。

更新：これに触れるW3仕様の部分が見つかりました。

インラインの垂直パディング、ボーダーやマージン、非置き換えボックス、コンテンツ領域の上部と下部に開始し、「行の高さ」でを何の関係もありません。しかし、ラインボックスの高さを計算するときは、 'line-height'のみが使用されます。 CSS 2.1 Spec

2011-08-17 19:21:57 scottheckel

すてきな視覚的説明http://www.maxdesign.com.au/articles/inline – BoltClock

インライン要素はレイアウトに影響しないため、blockまたはinline-blockはinlineスパンになりません。

2011-08-17 19:19:38

しかし、レイアウトには影響しません。彼らは親の幅にちょうど良い影響を与えます。彼らのマージンは追加されます。彼らの詰め物だけじゃない...？ –

六角形の説明が優れています。インライン次元が部分的に変更される理由はわかりませんが、ブロックレベルの要素に影響を与えることではないという理論だけがわかります。しかし、あなたは正しい：現実は、2人が何らかの形で相互作用することを主張している。 –

特殊な場合（浮動小数点数と絶対配置された要素に 'width'と表のセルの内容がない場合を除く）を除いて、それらは親の幅には影響しません。 – bobince

<div>はこの場合サイズを変更することを意図していません。 <span>はインライン要素です。それはoverflow:auto;

div, span { 
    border: 1px solid gray; 
    overflow:auto; 
}

2011-08-17 19:23:08 zellio

これは間違った方向に向かっています - divはそれ以上大きくはないだけでなく、スクロールバーもあります。 –

答えて