CSS：float:leftした要素の右に次の要素を並べた時にできる3pxほどの隙間を無くすには？

質問

CSSですが、例えばヘッダーに二つの要素を左右に並べたいとします。

そのとき、一つ目の要素をfloat:leftしたら、この一つ目の要素と
次に来る右側の要素との間に3pxほどの隙間が出来てしまいます。
解消するにはどうしたらいいでしょうか？

検索していると、次の要素もfloat:left;とすると良いとありましたが
それは嘘でした。ますますひどくなるだけでした。

宜しくお願い致します。

回答No.1

leap_day

こんにちは

＞それは嘘でした。ますますひどくなるだけでした。
2つ目のものにmargin-left、もしくはpadding-leftを設定していませんか？

<div>
<div style="width:100px;height:100px;float:left;background-color:red;"></div>
<div style="width:100px;height:100px;float:left;background-color:blue;"></div>
<div style="clear:both;"></div>
</div>

これはぴったりひっつきますが

<div>
<div style="width:100px;height:100px;float:left;background-color:red;"></div>
<div style="width:100px;height:100px;float:left;background-color:blue;margin-left:10px;"></div>
<div style="clear:both;"></div>
</div>

これはmargin分空きます

多分流れから言うと
<div style="width:100px;height:100px;float:left;background-color:red;"></div>
<div style="margin-left:100px;width:100px;height:100px;background-color:blue;"></div>
の状態から下の<div>にfloat:left;を付け加えただけなのでは？

お礼

何度も教えていただき助かっています。
ありがたいです。