スタイルシート(CSS)講座 トップ　>>　スタイルシート(CSS)Q＆A 　>> 　段組して、ヨコのマージン定義したら妙に間隔が広がった

段組して、ヨコのマージン定義したら妙に間隔が広がった

これは、「float属性」を定義した、ボックスに、
「margin属性」の左右の値を、定義したときにおこる現象です。

私の場合はまず、下のような、段組をつくりたいとおもったんです。



まず、段組するわけですから、
この両方のボックスには、「float属性」を設定してあります。

それから、２つのボックスの間隔を「１０ｐｘ離れさせたい」わけですから、
右の青いボックスに、「margin-left:10px」と設定したわけです。（もしくは、margin: 0px 0px 0px 10px）

すると、どうでしょう。

ブラウザで見てみると、１０ｐｘを超えて、明らかに２０ｐｘぐらい離れてしまいました。（涙）

おかげで、レイアウトはメチャメチャ。

３０分ぐらいやる気をなくしました・・・

原因は、わからないんですけど、
とにかく、「float属性」と、「margin属性」（左右のみ）は、
相性がわるいみたいなんです。

だから、同じボックスに、これらを同時に定義するのは、やめておいたほうが無難です。


でも、私はこんなレイアウトをしたいっ！って、あきらめきれませんでした。

それで、どうにか、こんなレイアウトを可能にする方法を発見しました。

ちょっと考えれば、わかることなんですけど、
要は、同じボックスに定義しなければいいわけで、

段組用の透明なボックスを用意してあげれば解決するんです。

こういうことです。



点線のボックスが、透明なボックスです。
この透明なボックスと、赤いボックスで、横の段組をつくってあげて、

それから、透明なボックスのなかに、マージン定義した青いボックスを入れ子にします。

こうすることで、レイアウトが実現できます。

うまい具合に、「float属性」と「margin属性」が別々のボックスに、定義されてますよね？

もっと、横に伸ばしたいのなら、点線のボックスと、青いボックスを繰り返えせばいいわけです。


もっといい方法もあるかもしれませんが、とりあえず、こういう方法もあります。

<<　 <H1>タグ入れたら、レイアウト崩れちゃいました

ネットスケープで見ると、ボックスからテキストがはみ出してます　>>

<< スタイルシート(CSS)講座 トップ