フロートとマージンの実験-2
詳しくは説明エントリへ。
- みぎのボックス
- ひだりのボックス
- (1) まずは、ボックスを並べてみる。みぎのボックスのみfloat: rightをし、ひだりのボックスはなにも指定せず。挙動は同じなんだけれど、ボックスがとなりあわせで並んでないよね。
- みぎのボックス
- ひだりのボックス
- (2) みぎひだりどちらのボックスもfloat: rightをする。どれも同じになる。以下すべてこの条件を用いる。
- みぎのボックス
- ひだりのボックス
- (3) ボックスの間を開けたいとしよう。みぎのボックスでmargin-left: 100pxをしてみる。大丈夫。
- みぎのボックス
- ひだりのボックス
- (4) 今度は、ひだりのボックスでmargin-right: 100px。これも大丈夫。
- みぎのボックス
- ひだりのボックス
- (5) みぎのボックスでmargin-left: 50px。ひだりのボックスでmargin-right: 50px。大丈夫。marginが相殺されたりはしない。
- みぎのボックス
- ひだりのボックス
- (6) 今度は、みぎのボックスの右側にも間を空けたいとしよう。両方ともmargin-right: 100pxにしてみると、IE6だけみぎのボックスのmargin-rightが倍になる。使えない。
- みぎのボックス
- ひだりのボックス
- (7) ボックスの開始する座標を100pxずらすとうまくいく。