imgタグを入れたらなぜか隙間が開いている。paddingもmarginも0なのに。

Author:

下記のような形でタグを記述すると、なぜかimgタグの下に僅かな隙間ができてしまいます。

<div>
<img src="xxx.png">
</div>

とりあえずchromeで確認。
なぜかdivブロックの高さが画像の高さより大きくなるんですよ。
marginやpaddingをいくらいじっても変わらないという気持ち悪さ。

これ、vertical-align設定が原因なのですよね。
topに合わせようとしてできてしまう隙間なのです。
個人的には意味不明感があるけど、vertical-align:bottomにすれば治ります。
divブロック要素が画像の高さと一致します。

しかしこの微妙な隙間、どういう計算で出てくるんでしょうね。
意味不明なレンダリングですなあ。

Facebook にシェア
Pocket