サイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。
それはある日、画像をピッタリくっつけた状態で、リキッドレイアウトで縦横可変、というレイアウトを組んだ時です。縦に横にと画像を並べるのですが、縦に並ぶ画像に数ピクセルの隙間が空いているではありませんか。
縦幅を固定したいけど出来ないとき
よく考えたら普段から「なんか画像の下の余白が空いてるな」とか思いつつ、下部のmarginの値を調整したり、line-heightの値を調整したり、といった感じで調整したり、細かい場合はheightも固定してみたり、といった対応をしていました。
しかし今回は縦横可変だったので縦幅を固定にするわけにもいかず。
vertical-alignで意図した表示に
こんな時に設定すべきCSSがvertical-alignです。まず、こんなHTMLを書いていたとします。
このまま表示すると画像が縦に並びますが、特にmarginやpaddingを設定していないにもかかわらず、謎の余白が生じてしまいます。
こんな時に、画像に対して以下のCSSを設定すると、謎の余白が無く、意図した表示になってくれます。内容はシンプルで、imgに対してvertical-alignを設定するだけでOK。
.list img{ vertical-align: bottom; }
実際の表示はこちら
imgタグにvertical-alignを設定すると、謎の余白が無くなり、意図した表示になってくれると思います。
謎の隙間の原因は何なのか
imgタグのvertical-alignは標準で「baseline」に設定されているようで、これが原因のため、「bottom」で設定することで解決するようでした。しかし「baseline」の説明を見ると「下端が親要素のベースラインに揃えられる」そうなので、余白が空いてしまうのもおかしい気がしますが、余白が空いてしまうのは空いてしまうので仕方ないと考えて、細かいレイアウトが必要な際はimgに「vertical-align:middle」を設定してあげることが無難だと思います。
以上、画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSSでした。