html - div の不思議な余分なスペース

Question

画像の上にテキストを重ねようとしていますが、画像を div でラップして境界線を適用すると、後で余分なスペースがあることがわかります。このスペースはどこから来て、どうすれば削除できますか? 次の jsfiddle に例があります。

http://jsfiddle.net/ngd5R/22/

.avatar境界ボックスが含まれる画像よりも大きいことを示すために、 の背景が赤になっていることに注意してください。親の高さに依存しているimgため、境界線を適用することはできません。.message

Answer 1

次の行をルールに追加します.avatar img。

display: block;

赤い背景が消えます。これが更新されたフィドルです。デフォルトでは、画像はインライン要素（技術的にはinline-blockIIRC）であり、テキストと同じように流れることを意味します。画像をブロックレベルのアイテムにすると、「テキストスタイル」のフロールールは適用されません。