aタグにimgを使用した後の高さは 4px_html/css_WEB-ITnose

2日前、Webサイトの作業をしていたところ、aタグでimgを使用した後の高さが4pxも増えていることに気づき、混乱しました。

最後に、注意深く分析した結果、その理由がわかりました。img はインライン要素であり、デフォルトの表示: inline では、テキストのデフォルトの動作に似ており、下端がベースライン (ベースライン) に揃えられます。コンテナの下端近くではなく。 displayp を block に設定すると、4px のバグを解消できます。

原因が判明したので、解決策は複数あるはずです。

以下のように:

1. 画像をブロック (display:block) として定義し、次に overflow:hidden を設定します。
3. font-size:0; を設定します。 img align のvertical-bottom;
5. img の margin-bottom を設定します: -4px;
これで、将来の具体的な使用シナリオに基づいて最適なソリューションを決定できます。