MW211 EXIT

devlog
CSS/画像の隙間
2013年06月28日
┌──────────────────────────────────────┐
│<table><tr><td style="border:1px solid #000000;">                           │
│<img src="画像.jpg" alt=""/></td></tr></table>                              │
└──────────────────────────────────────┘
画像imgタグをtdタグの中に入れると、下の方に隙間ができてしまう。
tdの縦幅(height、padding、border、margin)を調整しても隙間を解消できない。
Firebugで調査しても、不思議な余白分、縦幅が追加されている。

これを解消するには、以下のスタイルを適用させればよい。
┌──────────────────────────────────────┐
│img {                                                                       │
│    vertical-align  :bottom;                                                │
│}                                                                           │
└──────────────────────────────────────┘
「g」とか「j」のような、下に若干出ている文字向けに、若干下に隙間があり
その分、隙間があいてしまうので、下端に合わせるように指定してやれば
隙間がなくなるといった感じだ。
分類:CSS