すべての主要なブラウザーで: 質問が示すように、親<div>コンテナー (高さが設定されていない) は、子要素に合わせて高さを大きくします<img>(たとえば、div. 通常、オーバーサイズは約 3 ～ 5 ピクセルであり、最初は imgmargin-bottomまたは divのように表示されpadding-bottomます。
divただし、絶対配置を使用すると、 の下部がの下部よりimg数ピクセル下にあることが明確に示されます。Web サイトのデザインが損なわれることはないかもしれませんが、特定の状況では克服しなければならないハードルです。ここで、この問題を示すかなり詳細なフィドルを作成しました。
- Web ブラウザーでこの標準的な方法が採用されているのはなぜですか?
- これは何かを補償するためのものですか？不要のようです。
- これはバグですか、それともすぐに時代遅れになる機能ですか?
編集:以下の回答者/コメンテーターのおかげで、要素の周りの空白を保持
<img>する CSS としてデフォルト で an が扱われる理由がわかりました。display:inlineそれを変更してdisplay:block、要素の周りの空白を削除することで問題を完全に修正します。
注:このオーバーサイズは、イメージの子要素にfloat:leftorfloat:rightなどの CSS プロパティを指定することで回避できますが、これは回避策であり、質問に対する回答ではありません。これが問題になる理由の 1 つは、既にfloatdiv 子画像の前に他の要素がレイヤー化されている場合です (フロート オーバーラップは Firefox、Opera、IE では許可されません。オーバーラップは、CSS設定floatを使用する Chrome と Safari でのみ許可されているようです)。ありがとう！position