深夜のテンションでサムネ画像作ったらこんなことになりました。いい感じにハイになってます。
…さて、Webサイトの制作時、画像の下に謎の余白が生まれることがありますよね？これ、初心者の方は結構悩みそうなので、理由と解決方法を載せておきます。
分かりやすく、黒いボックスの中に画像を配置しました。下に余白が出来ていますね。
ちなみに写真は愛車のCBR400Rちゃんです。
これ結構忘れがちなんですが、画像ってテキストと同じインライン要素なんですよね。なので、配置されるのは下端ではなくベースラインです。このベースラインと下端の間が、余白として現れてしまいます。
あ、ベースラインって何ぞや？って人はググってね。
画像をブロック要素にするのが一番簡単な方法です。
なお、ブロック要素にはtext-alignが効かないので、中央寄せしたいならmargin: 0 autoを使いましょう。
|
1 2 3 4 |
img{ display: block; //ブロック要素化 margin: 0 auto; //中央寄せ } |
縦方向の揃え位置を下端に指定するvertical-align: bottomを使えば、画像は下にベッタリ張り付きます。
|
1 2 3 |
img{ vertical-align: bottom; //下端揃え } |
2通りの方法を紹介しましたが、特に理由が無ければブロック要素化するのが一番楽です。インライン要素のままだとどうも扱いにくくてね…
