ホームページ > 記事 > ウェブフロントエンド > a タグで img を使用した後の高さが数ピクセル増えるのはなぜですか? _html/css_WEB-ITnose
a タグで img を使用した後の高さが数ピクセル増えるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:18990ブラウズ
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 を指定するため、行レベルのボックスの配置の問題は発生しません
他の解決策も利用できます、しかし、これらは問題の根本的な解決策です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。