a<div>またはその他の要素が の後に続く場合<img>、それらの間に ~3px の空白が表示されます —ゼロであってもmargins。
<img src="example-fractal-art.png">
<div>What is with that gap?<div>
これは、いくつかの CSS でどのように見えるかです。
display: blockこれで、CSSに投入して問題を解決するのは非常に簡単になりました。しかし、なぜそこにあるのですか？計算されたマージン、パディング、ボーダー、またはそのようなものはありません。
ブラウザは何をしていますか？誰かがそれを「魔法」とさえ呼んだ。
PS または、場合によっては、HTML コード内の空白を削除することでこれを解決できます。（しかし、この場合はうまくいきません。なぜですか？）
はimgHTML の「置換要素」であり、文字として扱われます。スタイルがない場合、画像は線上の他の文字のベースラインに揃えられます。
つまり、画像の下にディセンダー用のスペースがあります。
お気づきのように、ブロックに変更すると、この機能が削除されます。
デフォルトでは、画像はテキストのベースラインに揃えられます。したがって、画像の横にテキストを配置すると、画像は のベースに揃えられますが、xそのベースラインとテキスト行の下部の間にはわずかなスペース (明らかに 3px) があります。
そこにあります：
vertical-align: bottomまた、画像をブロックにしたくない場合は、を使用して解決できます。そうすれば、画像はテキストの一部のままですが、ベースラインではなく、テキストのバウンディング ボックスの下部に配置されます。
もちろん、 a に変更してdisplay: blockも機能しますが、別の副作用があります。現在すべてが機能している場合は、変更するvertical-alignのが簡単な方法です。