imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。

(1) src: 画像パス (2) 幅:
（３）高さ：
（４）代替：

アラートの役割:

画像にエラーが発生した場合、alt 内の関数を使用してエラー内容を示し、検索エンジンのクロールを容易にします (検索エンジンのクロールと SEO レンダリングに便利です)

注記：

(1) imgに設定する幅と高さは、画像本来のサイズでなければなりません。 (2) 一般的にインライン要素は幅と高さを設定できません。imgもインライン要素ですが、置換要素であり、srcを通じて設定できます。

インライン要素とインライン要素の違い。

インライン要素間の間隔の問題を解決する方法:

下の図のインライン要素の上下に隙間がある理由は次のとおりです。

img はインライン要素です => インライン要素は、デフォルトで要素コード内に改行を生成します (空白とも呼ばれます => デフォルトでテキスト文字列として使用することもできます)

次の図のインライン要素間の垂直方向のギャップの理由は次のとおりです。

インライン要素のデフォルトのベースライン配置により、空のノードが表示されます (vertical-align: baseline;)
ベースラインアライメントとは何ですか?
垂直方向と水平方向に作用します。空白ノードとは何ですか?
垂直方向の空白ノードの原因：imgインライン要素はブラウザで文字列として扱われる可能性があるため、front-sizeフォントサイズの影響を受ける可能性があり、line-heightも空白ノードに影響します=>画像を追加すると、下に余分な空白行ができ、これが空白ノードの役割です。

解決策1:

インライン要素は文字列として扱われるため、親にfont-size: 0を追加することができます。配置はvertical-align: middleになりますが、親のテキストスタイルに問題が発生する可能性があります。

解決策2:

インライン要素からブロックレベル要素に変更するには、display を使用します。

注: vertical-align と line-height は、CSS で理解するのが最も難しい 2 つの知識ポイントです。font-size = 0 を変更できるのはなぜですか? img の空白ノードを消すことはできますか?

テキストと画像の例: 画像にspanタグを使用する

2 つのインライン要素の配置は vertical-align: baseline です。テキストが画像のベースラインを超えていることは明らかです。

次の図では、テキストのサイズが変更され、画像間の垂直方向の間隔も拡大しています。

原因:

テキストにはデフォルトの行の高さがあり、テキスト間の垂直方向の間隔が発生します。テキストが大きいほど、間隔が大きくなります。 => 「vertical-align: miiddle;」を使用すると、テキストの位置が上がり、以下に示すように間隔は生成されません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。