こんにちは。SaitoKouです。
本日は、画像を表示するときにできる隙間について書こうと思います。
例として、下の画像を見てください。
それぞれの画像の下に、隙間が空いていますよね。この隙間、padding や marginを0にしても発生するときがあります。（実際に追加CSSの欄を見てもらうと、Importantで無理やり設定してあります笑）
開発者ツールで確認してもこの通り。
画像を敷き詰めたいときなどはこの隙間が非常に邪魔になりますが、これをなくす方法があります。
vertical-align: bottomをimgタグに指定する
これだけで隙間をなくすことができます。
試しに書いてみると、、、
隙間が詰まりました！
これ、一体どういうことかというと、「画像の下端をどこに合わせるか」を設定しています。
imgタグのような「インライン要素」は、vertical-alignという、縦の位置を決定するプロパティが用意されています。vertical-alignをとくに指定していない場合、デフォルトでvertical-align: baseline;が設定されます。この時、画像の下端は親要素のbaselineに合わせて表示されます。
したがって、「y」の文字を見ればわかるように、baselineから下の部分に隙間ができます。しかし、vertical-align: bottom;を指定すると、この下端が親要素の下端にくっつくように配置されます。
これで、画像の下に要素を配置しても隙間ができなくなるというわけです。
まとめ
私はWordPressのブロックエディタを使用して画像を配置することが多々ありますが、その方法で画像を並べると上記の現象が確実におきます。この仕組みを理解して、必要に応じてvertical-alignを設定しましょう！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
サービスは以下から承っております。
