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

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

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

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



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

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

すると、どうでしょう。

ブラウザで見てみると、10pxを超えて、明らかに20pxぐらい離れてしまいました。(涙)

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

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

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

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


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

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

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

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

こういうことです。



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

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

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

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

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


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

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

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

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