ここで私のコードペンを見ると：
http://codepen.io/anon/pen/LHBqs
display: blockimgの " " を " " に変更すると、「display: inlineカジュアルな環境での高級ダイニング」というテキストがさらに下に押し出されます。
その下の「ファインダイニング」要素はブロック要素ですが、ブロック要素はインライン要素と同じ行に表示できないためh2、タグがブロックであるかインラインであるかによって違いが生じるのはなぜですか?img
1 に答える
3
これはマージンの崩壊に関連しています - あなたimgとそのh2下には互いに「接触」するマージンがありますが、ブロック要素の場合、マージンは崩壊 (1 つにマージ) しますが、インライン要素の場合はそうではなく、両方が適用されるため、追加のスペースが必要です。
この記事をチェックしてください - http://www.howtocreate.co.uk/tutorials/css/margincollapsing
于 2013-04-19T23:53:42.830 に答える