こんなことが起きました…
マージンもパディングも指定していないのに、どうして画像の下にどうして隙間が生まれる?
この原因はcssでした。
【解決】imgに指定されているcss「vertical-align」
結果から言うと画像に対して「vertical-align: baseline;」が指定されていることが問題でした。
多くの場合はreset.cssなどを読み込んだ際にimgに対して「vertical-align: top;」などが指定されるため、通常のサイトのコーディングのフローでは発生しにくい現象でした。
今回、一からサイトをコーディングをしている際にこういった初歩的なスタイルの崩れが発生し解決するのに少し時間がかかってしまったのでここで共有させていただきました。
vertical-alignとは
インライン要素やテーブルセル内の要素の垂直方向の位置を調整するためのプロパティです。
主に、インライン要素やインラインブロック要素に対して適用されます。
※ブロック要素には効果がありません。インライン要素やインラインブロック要素に対して使用する必要があります。
問題の現象の再現
codepenでその現象を再現したのでどのような崩れか是非確認してみてください。
小林祐也
2024.09.19