デザイン事務所ダウンアンダー

東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

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

この記事は2014/03/31に公開され、11,325回読まれました。

      技術ノート   , ,    野村貞次

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

01

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

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

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

02

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

 

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

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

ページ
先頭へ