HTML5とXHTMLでレイアウトが変わっちゃうんだけどォ！

2015/2/8 2015/2/22 未分類

昔買った参考書のサンプルサイトを写経していたんです。

XHTMLで組まれていたんですが、HTML5で組み直していたらレイアウトがちょっと崩れていました。

img要素を内包したh1要素が上下に4pxほど膨張していたのです。

原因は未だによくわかっていませんが、h1にheigtを指定したら解決しました。（h1とimgの高さが一致した）

ですが、何かスッキリしません。

モヤモヤ解消のため少し調べてみたら、以下の様な記事を見つけました。
html5のテーブルの画像に3pxの隙間が出来る件

なんか似た内容なのかなあと思い、試しにreset.cssに　{ vertical-align: bottom; } を指定してあげたら、概ね解決しました。

今度は逆にサンプルよりも縮んじゃった箇所も出てきちゃいましたけど。。。

もうちょっと調べる必要があるみたいです。

問題の起こる箇所はブロック要素がimg要素を包含している点で共通している気がします。

誰か原因がわかるひといたら教えて下さい。