a タグで img を使用した後の高さが数ピクセル増えるのはなぜですか? _html/css_WEB-ITnose

a 要素の下に匿名のテキストがあり、このテキストの外側に匿名の行レベルのボックスがあります。そのデフォルトのvertical-alignはbaselineであり、多くの場合、上のline-heightの影響により、 line-height で高さを持たせるため、ベースラインの位置合わせにより、匿名ボックスは下に沈んである程度の距離が広がるため、 a が高くなります。

解決策 1: 匿名ボックスの高さを削除します。つまり、 a に line-height:0 または font-size:0 を設定します。
解決策 2: 両方にvertical-align:top を指定して、上部が揃うようにします。 、ベースラインの配置の代わりに
解決策 3: 匿名の行レベルのボックスと同じレイアウト コンテキストにならないように img display:block を指定するため、行レベルのボックスの配置の問題は発生しません

他の解決策も利用できます、しかし、これらは問題の根本的な解決策です