要素の下部にスペースがあるのはなぜですか? _html/css_WEB-ITnose

理由:

画像やテキストなどのインライン要素は、デフォルトで親要素のベースラインに揃えられます。つまり、vertical-align のデフォルト値はベースラインであり、ベースラインはベースラインとは異なります。親要素の下部の距離

img に表示される空白は、テキストのない画像のみであっても、インラインである限り存在します。写真。

img タグはインライン要素であり、インライン要素はデフォルトでベースラインに揃えられます。 ベースラインが整列すると、ベースラインと下部の間に空白スペースができます。したがって、vertical-align の値を直接設定すると、この状況を回避できます。

上部と下部の間の値は行の高さです。 line-height を 0 に設定すると、ベースラインと底部の間の距離も 0 になり、空白が消えます。

line-height が設定されていない場合、line-height のデフォルト値は font-size に基づきます。これはレンダリング エンジンによって異なりますが、通常は係数 (1.2 など) が乗算されます。したがって、line-height を設定せずに font-size を 0 に設定すると、同じ効果が得られます。もちろん、その結果、画像とテキストを混合することはできなくなります。

解決策:

1: 垂直配置を設定します。

img{	vertical-align : bottom; // top, middle}

vertical-align の値が上記の 3 つのいずれかである限り、ギャップの問題は解決できます。

2 つ: img の親コンテナのフォント サイズを 0 に定義します。

.main{ font-size : 0; }

3 つ: 画像をブロックレベルの要素として設定します。 //www.xiabingbao.com/css/2015/10/12/css-img-blockhttps://segmentfault.com/q/1010000000694663

https://www.zhihu.com/question/21558138