« 左右マージンが指定値より大きくなってしまう | MAIN | IEでブロックレベル要素がセンタリングしない »

clearプロパティの指定で不要な余白ができてしまう

widthプロパティを明示して解決する

テキストの左右どちらかにfloatプロパティで画像を回り込ませ、後続する要素の回り込みを解除したい場合、clearプロパティを使います。しかし、IE6および7では不自然な上パディングが開いてしまいます。そこで、clearプロパティを指定した要素のwidthプロパティの値を「auto値」以外で指定してみてください。ただし、この方法では常に横幅を計算する手間がかかるため、IE独自拡張のzoomプロパティを指定するといいでしょう。なお、この場合CSS Validator(CSSの文法チェック)ではエラーになるので、どちらの特性も理解した上で使い分けてください。



IEで見た場合、widthプロパティの指定がないため余白ができている。

.textArea img { float:right; margin: 0 0 10px 20px; }

blockquote {
clear: both;
width: 560px;
margin: 20px 0;
padding: 13px 18px 0;
background:#f6f6e3 url(../img/bg.gif) repeat-y;
}


Field Under (DJ news), Posted by: djhiro

トラックバック

http://www.dj-hiro.co.uk/mt5/mt-tb.cgi/182

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)




Apple Store(Japan)