img の下に入る隙間

margin も padding も 0 なのに、なぜか img の下に隙間が入ってしまう。何ででしょう？
これ、地味に困るんですよね。
レイアウトが若干ずれるし、ネガティブマージンで見出しを画像に重ねようとしても、計算通りいかない・・・

原因は、img はインラインレベルの要素なので、デフォルトで vertical-align: baseline となっているからです。空間に引かれたベースラインの上に、画像が表示されるという考え方です。ベースラインに揃えられた画像の下には、任意の隙間ができます。

＜① vertical-align で上または下に揃える ＞
img タグに vertical-align: top または vertical-align: bottom を指定することで、画像を上揃えか下揃えにして、ベースラインの下の隙間が無くなります。

img {
vertical-align: bottom; /* または vertical-align: top; */}

＜② display で img をブロックレベルの要素化にする ＞
display: block でブロックレベルの要素化することで、インラインレベルの配置にまつわるベースラインは消えます。ですが、ブロックレベルとして扱われるので、基本的には、隣接する要素とは縦方向に並びます。（横方向に並びません。）

img {
display: block;
}

ブロックレベル、インラインレベル、それぞれの特徴をよく知ることが大切ですね。

img の横に入る隙間

img と img を横並びに隙間なしに表示させたいのに、こんな風に、間に隙間が入ることがあります。

これは、html の書き方によります。
次の様に、二つの img タグを改行して記述して書いた場合です。

<img src="cat-dog.jpg">
<img src="hedgehog.jpg">

隙間を消すためには、これを改行せずにつなげて記述します。

<img src="cat-dog.jpg"><img src="hedgehog.jpg">

これで隙間が消えます。小さなことですが、気を付けなくてはいけないことですね。