img の下に入る隙間
margin も padding も 0 なのに、なぜか img の下に隙間が入ってしまう。何ででしょう？
これ、地味に困るんですよね。
レイアウトが若干ずれるし、ネガティブマージンで見出しを画像に重ねようとしても、計算通りいかない・・・
原因は、img はインラインレベルの要素なので、デフォルトで vertical-align: baseline となっているからです。空間に引かれたベースラインの上に、画像が表示されるという考え方です。ベースラインに揃えられた画像の下には、任意の隙間ができます。
＜① vertical-align で上または下に揃える ＞
img タグに vertical-align: top または vertical-align: bottom を指定することで、画像を上揃えか下揃えにして、ベースラインの下の隙間が無くなります。
＜② display で img をブロックレベルの要素化にする ＞
display: block でブロックレベルの要素化することで、インラインレベルの配置にまつわるベースラインは消えます。ですが、ブロックレベルとして扱われるので、基本的には、隣接する要素とは縦方向に並びます。（横方向に並びません。）
ブロックレベル、インラインレベル、それぞれの特徴をよく知ることが大切ですね。
img の横に入る隙間
img と img を横並びに隙間なしに表示させたいのに、こんな風に、間に隙間が入ることがあります。
これは、html の書き方によります。
次の様に、二つの img タグを改行して記述して書いた場合です。
隙間を消すためには、これを改行せずにつなげて記述します。
これで隙間が消えます。小さなことですが、気を付けなくてはいけないことですね。