CSS 学習メモ - 画像 img と親要素 div_html/css_WEB-ITnose の間のギャップを解決する

はじめに

Web ページを作成しているときに、画像を表示する必要があり、div を使用して img をラップしましたが、ブラウザでプレビューするときに問題が発生しました。よく見ると、画像と div の間にギャップがあります。
簡単なコードは以下に貼り付けられています

<div class="content">        <img src="./img/user.jpg"></div>

私の外側のコンテナのコンテンツはフローティング要素が縮小するという原則に従って、このピンク色のギャップは表示されないはずですが、なぜ発生します。ここにはあるでしょうか？その後、オンラインで調べたところ、line-height とvertical-align の問題が関係していることがわかりました。

.content{    float:left;    margin:100px auto;     background:pink;}

Text

• vertical-align

vertical-align はインライン要素または表のセルを指定します 垂直方向の配置テーブルセル要素 (MDN からの抜粋)。

vertical-align の値には、top、middle、baseline、bottom が含まれます。

vertical-align のデフォルト値は、画像を意味する Baseline です。の下端は実際には青い線と位置合わせされており、テキスト要素 自体にも高さがあるため、下の緑の線と青い線の間の距離に相当する余分な空白が存在します。

では、なぜテキストがなくても画像の下部に隙間があるのでしょうか? それは、HTML5 のドキュメント宣言では、ブロック要素内のインライン要素がブロック要素内にまだ隙間があるかのように動作するためです。 1 つ (おそらく前後 2 つ) 幅もエンティティもない目に見えない無形の空のノード (Zhang Xinxu のブログから抜粋) そのため、ベースラインのデフォルトの垂直方向の位置合わせを持つ画像は、親 div との間にギャップが生じます。 。

これを理解すれば、最も直接的な方法は、

で img タグの垂直方向の配置を設定することです。

で img タグの display:block を設定します。

前述したとおりです。前のテキストの冒頭で、Vertical-align はインライン要素またはテーブルセル要素の垂直方向の配置を設定するため、img をブロックレベル要素として設定する場合、ベースラインの配置の問題は発生しません。

img{    vertical-align:bottom;//middle和top也都可以}

親要素 div のフォント サイズを 0 に設定します

img{    display:block}

.content{    float:left;    margin:100px auto;     background:pink;    font-size:0px;}

d80b5def5ed1be6e26d91c2709f14170

使用される値は単位なしです [d80b5def5ed1be6e26d91c2709f14170

](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number) に要素のフォント サイズを乗算した値は、指定された

と同じになります。ほとんどの場合、
これが行の高さを設定するための推奨される方法です
。継承の場合に予期しない結果は発生しません。**使用される値は単位のない数値 [d80b5def5ed1be6e26d91c2709f14170] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/number) に要素のフォント サイズを掛けます。計算された値は数値で指定した値と同じになります。ほとんどの場合、この方法を使用して行の高さを設定することが推奨される方法であり、継承の場合に異常な値は発生しません。 ** (MDN より抜粋)

単位が設定されていない場合、line-height は font-size を乗算して計算されます。 font-size を 0 に設定すると、line-height も 0 になり、その余剰です。ギャップ（ベースラインとボトムの差）も行の高さに関係するため、当然ギャップは解消されます。
終了

これは、img と親 div の間のギャップをどのように解決したかをまとめたものです。実際、line-height とvertical-align についてはさらに詳しく調べましたが、すべてを消化することはできません。今日はここで終わりにしましょう。今後さらに理解が深まってきたら、少しずつ追加していきます。もし上記の内容に間違いがあれば、友達が来てコメントしてください。