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

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

営業
10:00-
19:00

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

     技術ノート   , ,  野村貞次

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を設定してやります。

 

     技術ノート   , ,  野村貞次

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 こちらの記事も読んで見ましょう

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

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

ページ先頭へ