imgタグ, 画像を並べる

その 1: img タグだけを並べたサンプル

img タグを並べると、画像の左右や上下に余白ができることがあります。

・左右の余白は HTML ソースの改行コードが原因です。
  改行コードは半角スペースと見なされます。この分、余白が
　できます。

・上下の余白は、1) 行間 (line-height) と 2) img を
　行内に配置するときの縦位置 (vertical-align) が関係
　しています。

先に要点： font-size: 0; で余白をなくせます

img の外に div などのブロック要素を置いて、font-size: 0; に
すると余白がなくなります。

font-size が 0 だと、改行(半角スペース)の幅や行間やフォントの
ベースなどがすべて 0 になるので、余白ができなくなります。

その 2: いろいろお試し

display: inline-block; が指定されている要素の性質の話。

・前置き
  テキスト  : インライン要素
  画像(img) : インラインブロック要素

1) 改行は半角スペースと同じと見なされる

HTMLソースの改行は半角スペースがあるのと同じ扱いになります。
テキスト(インライン要素) が 1文字あるのと同じになります。

img タグを改行して並べると img の間に文字が 1文字あるのと同じ
になり、img を改行せずに img を並べるとその部分の左右の余白が
なくなります。

  上 2枚の画像は改行の分だけ余白ができる。
  下 2枚の画像は左右の余白がなくなる。


2) line-height: 0; で上下の余白がなくなります

line-height: 0; にした場合、
・画像 (インラインブロック要素) は画像の高さ (height) が確保さ
　れる。
・テキスト (インライン要素) は高さがなくなるので、画像や次の行
　のテキストと重なります。

行が重なる。
サンプルテキスト。

3) line-height: 1; (100%、行間 0 の場合)

line-height: 1; で行間をなしにすれば、上下の余白がなくなるよう
に思えますが、1 にしても上下にわずかに余白ができます。
フォントのベースラインと img の縦方向の配置 (vertical-align)
が関係しています。

サンプルテキスト。
サンプルテキスト。

4) vertical-align: bottom;

img の vertical-align を bottom にすると、img が行の下端に配置
されるので、上下の余白がなくなります。

・MDN:vertical-align

サンプルテキスト。
サンプルテキスト。
(2020/08-2024/04)
動作     : Edge120, Firefox120, Chrome119

◎ノート
・div の中にテキストがない場合は、上の話を気にするよりは
　font-size: 0; にした方が手っ取り早いです。
inserted by FC2 system