float要素の後のmargin-topが効かないことの対処。

float要素の後のmargin-topが効かないことの対処。

floatを並べた後、clear : bothを設定したh2等でfloatをキャンセルすることがよくあります。

A、Bが並んでいます。Cにはclear : bothしてmargin-topが設定してあります。

ところが、このmarginの値をいくら変えても間隔が変化しない?おかしい?という事態になります。BとCの間に<br style=”clear : both” />などの別要素を挟んでやればかんたんに解決しますが、HTMLの考え方からすると汚いですね。

こちらも「不要なdivタグ」と言えなくもないのですが、上記よりはスマートです。

floatしているA・BをdivタグDで囲み、Dにはoverflow : hiddenを設定してやります。

 

この記事は2014/03/31に公開され、611 views読まれました。

     技術ノート   , ,

最近1ヶ月で人気の記事

float要素の後のmargin-topが効かないことの対処。 - デザイン事務所ダウンアンダー 東京都練馬区。Wordpressはおまかせ。ホームページ・印刷など販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー, All Rights Reserved.