html5での、h1タグの余白について

モバイル端末用のページをhtml5＋CSS3でコーディングしています。
基本的にリキッドレイアウトで、imgタグについてはwidth:100%; vertical-align:top;を設けています。
また初期化用CSSとして、以下URLのCSSを読み込ませています。
https://code.google.com/p/html5resetcss/download …

img（width:100%）をh1タグで括っているのですが、iPhoneで検証してみると、pタグ内に余白ができて
しまいます。
h1に対して、CSSで余白がでるようなことはしていません。
また、横向きにすると余白はでず、縦向き時のみ余白が出ます。
このような現象ってご存知で、解消方法はありますでしょうか。

No.1 回答者： ORUKA1951 回答日時： 2013/09/04 19:37

初期化用CSSなんて使わないほうが無難ですが・・

p要素の幅が狭くなると、imgの縦幅もつれて小さくなるため、親要素のline-heightが勝るだけかと・・
＞mg（width:100%）をh1タグで括っているのですが、iPhoneで検証してみると、pタグ内に余白ができて
しまいます。
　意味不明です。
<h1><img src="" width="" height="" alt="タイトル"></h1>
だとして、
h1 img{width:100%;height:auto;}
だと、幅が小さくなると余白がでて当然ですよ。

この回答へのお礼

ORUKA1951　様

意味不明の箇所、失礼しました。pタグではなく、h1タグでした。。。
imgタグを括る要素のline-heightを確認してみます。
ありがとうございました。

お礼日時：2013/09/05 12:45