【CSS】画像で変な隙間が出来たときの対処法【備忘録】

HPを構築する際に、画像は避けては通れない要素です。
しかし、構築をしてみると画像の間に変な隙間が。

今回はこれを解消する方法を説明していきます。

【CSS】画像で変な隙間が出来たときの対処法

結論は簡単で、CSSで画像に対して以下の要素を加えるだけです。

指定するのは「bottom」でも「top」でも構いません。
どうやら画像も文字と同じように扱われるようで、
そのせいで画像の下に隙間ができるようです。
小文字の「p」や「g」を考えると分かりやすいですね。

デフォルトで「baseline」が設定されているようなので、下の隙間をなくすには、
「baseline」以外を指定すればOKです。
CSSを指定することで縦の隙間がなくなりました。

横の隙間に関してはCSSで「float」か「display:flex」を指定することで解消されます。
「display:flex」がとても便利なので、こちらを使用することをオススメします。
img要素をdivなどで囲んで、上の要素に「display:flex」を適用させましょう。

こうすることで、横の隙間も消すことができます。

ここまでやっても隙間が消えない場合、並べようとしている画像のサイズが異なっていませんか？
当然ですが違うサイズの画像を並べると、隙間が出来てしまいます。

考えてみれば当然ですが、意外とハマるものです。
可能性として考慮してみてください。

以上、画像に対する隙間への対処でした。
「vertical-align」はクロームの開発ツールでも確認できないので焦ってしまいます。

ですが対処法は簡単です。
あらかじめCSSの最初に仕込んでおいてもいいかもしれませんね。