質問: html5での、h1タグの余白について モバイル端末用のページをhtml5+css3でコーディングしています。 基本的にリキッドレイアウトで、imgタグについてはwidth:100%; vertical-align:top;を設けています。 また初期化用cssとして、以下urlのcssを読み込ませています。 https://code.google.com/p/html5resetcss/downloads/detail?name=html5reset-1.6.1.css&can=2&q= img(width:100%)をh1タグで括っているのですが、iphoneで検証してみると、pタグ内に余白ができて しまいます。 h1に対して、cssで余白がでるようなことはしていません。 また、横向きにすると余白はでず、縦向き時のみ余白が出ます。 このような現象ってご存知で、解消方法はありますでしょうか。
回答: 初期化用cssなんて使わないほうが無難ですが・・ p要素の幅が狭くなると、imgの縦幅もつれて小さくなるため、親要素のline-heightが勝るだけかと・・ >mg(width:100%)をh1タグで括っているのですが、iphoneで検証してみると、pタグ内に余白ができて しまいます。 意味不明です。 だとして、 h1 img{width:100%;height:auto;} だと、幅が小さくなると余白がでて当然ですよ。