IE 画像_CSS/HTML でのギャップ問題の解決策集

多くの人がこの質問をしているので、時間をかけて整理しました。皆さんもコメントや追加の修正を歓迎します。ありがとうございます。
質問は次のとおりです:

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" > </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

解決策: 1. HTML の配置を変更します

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div><img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" ></div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して ]

解決策: 2.display:block

<style> div { width:500px; border:1px solid #f00; background:#000; } img {display:block} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" > </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

解決策: 3. 負の値

<style> div { width:500px; border:1px solid #f00; background:#000; } img {margin-bottom:-5px} div>img {margin-bottom:0} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" > </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

解決策:4. フォントサイズ

<style> div { width:500px; border:1px solid #f00; background:#000; font-size:0 } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" > </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

解決策: 5.vertical-align:bottom

<style> div { width:500px; border:1px solid #f00; background:#000 } img {vertical-align:bottom} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 画像_CSS/HTML でのギャップ問題の解決策集" > </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

私はまだ古い方法を使用しており、line-height:0 を設定します