<div>この余白は・・・

質問

<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。
CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？
また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。

▼HTML
<div class="out">
　<div class="title">
　　<img src="img/title.jpg" width="700" height="75" border="0">
　</div>
　<div class="main">
　　<img src="img/main.jpg" width="700" height="375" border="0">
　</div>
　<div class="menu">
　　<img src="img/home_a.jpg" width="100" height="35" border="0">
　　<img src="img/first.jpg" width="100" height="35" border="0">
　　<img src="img/info.jpg" width="100" height="35" border="0">
　　<img src="img/order.jpg" width="100" height="35" border="0">
　　<img src="img/support.jpg" width="100" height="35" border="0">
　　<img src="img/link.jpg" width="100" height="35" border="0">
　　<img src="img/question.jpg" width="100" height="35" border="0">
　</div>
　<div class="area">
　　<div class="box">
　　　<h5>AAAAAAAAA</h5>
　　　<img src="img/kari.gif" width="250" height="100" border="0">
　　</div>
　　<div class="box2">
　　　<h5>BBBBBBBBB</h5>
　　　<img src="img/kari2.gif" width="250" height="100" border="0">
　　</div>
　</div>
</div>

▼CSS
div.out{
width:700px;
background-color:#ffffff;
}
div.main{
border-style:solid none solid none;
border-width:10px;
border-color:#666666;
}
div.menu{
margin-bottom:50px;
}
div.area{
text-align:center;
padding:0.7em;
border:solid;
border-color:red;
}
div.box{
float:left;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
}
div.box2{
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
}
h5{
margin-bottom:0px;
padding:0.5em;
}

　どなたか知恵をお貸しください。よろしくお願いいたします。

回答No.2

leap_day · ベストアンサー

こんにちは

<div class="area">でセンターにしてるからではないでしょうか？
text-align:center; を除くと隙間はなくなります
あとはmarginなどを使って左右の余白調整してやればいいと思います

div.area{
padding:0.7em;
border:solid;
border-color:red;
}
div.box{
margin-left:40px;
text-align:center;
float:left;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
}
div.box2{
text-align:center;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
}

お礼

回答ありがとうございます。
そうなんですよね、text-align:center;を消すと余白がなくなるんですよね・・・・・・。やっぱりmarginでやるしかなさそうです。

回答No.5

key-child

構造から修正しました。文書方宣言が書かれていないので勝手にStrictを使わせてもらいます。見づらいので細かいところを削除しましたので、適宜変更をお願いします。

▼HTML
<div class="out">
<p class="title"><img src="" width="700" height="75" alt="タイトル"></p>
<p class="main"><img src="" width="700" height="375" alt="メイン"></p>
<ul class="menu">
<li><img src="" width="100" height="35" alt="メニュー１"></li>
<li><img src="" width="100" height="35" alt="メニュー２"></li>
<li><img src="" width="100" height="35" alt="メニュー３"></li>
<li><img src="" width="100" height="35" alt="メニュー４"></li>
<li><img src="" width="100" height="35" alt="メニュー５"></li>
<li><img src="" width="100" height="35" alt="メニュー６"></li>
<li><img src="" width="100" height="35" alt="メニュー７"></li>
</ul>
<div class="area">
<div class="box">
<h5>AAAAAAAAA</h5>
<img src="" width="250" height="100" alt="ＡＡＡ">
</div>
<div class="box2">
<h5>BBBBBBBBB</h5>
<img src="" width="250" height="100" alt="ＢＢＢ">
</div>
</div>
</div>

▼CSS
body {
font-size: medium;
color: #000;
background-color: #fff;
}

img {
border-width: 0;
}

.out {
width: 700px;
}

.main {
border-width: 10px 0 10px 0;
border-color: #666;
border-style: solid;
}

.menu {
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
list-style-type: none;
margin-bottom: 50px;
}
.menu li {
width: 100px;
float: left;
}

.area {
width: 500px;
padding: .7em 95px;
overflow: auto;
border-width: 5px;
border-color: #f00;
border-style: solid;
}
.area .box {
width: 250px;
float: left;
background-color: #9cf;
}
.area .box2 {
width: 250px;
float: left;
background-color: #9cf;
}
.area h5 {
padding: .5em;
}

お礼

回答ありがとうございます。
皆さんのご意見を参考にあちこちいじってみたところ、どうにか思い通りのものになりました。ありがとうございました。

回答No.4

leap_day

こんにちは

おぉ～～できてますね（＾＾）すばらしい！！

で・・余白の話ですけど
float:left;　した部分は不可動の領域として認識されるみたいですので残りのdiv領域がテキスト領域として認識されるようです

なのでboxのほうをmarginで右に動かしたりしたら分かるのですが
div.box{
margin-left:40px;
float:left;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
}
marginによって左の画像を中央付近に持ってきてます
このとき右側の画像は残りの余白のセンターの位置になっているのが分かります

(3mm)(31mm)(左の画像)(11mm)(右の画像)(11mm)(3mm)

という感じで・・・(3mm)はdivに起因する余白です

でその話とは別で一ヶ所気になったので訪れたついでに書きますね（＾＾）

この上の7つの<img>群、div幅が700でimg総幅が700ということはこの部分も1列で表示するのでしょうか？
今は2列で表示されてますよね？

とりあえず載せときますね（＾＾）

　<div class="menu" style="position:relative;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 0;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 100;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 200;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 300;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 400;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 500;">
　　<img src="sample0.gif" width="100" height="35" border="0" style="position: absolute; top: 0; left: 600;">
　</div>

class="menu"はborderがないのでこれで違和感なく見れると思いますけどborderをつけるときにはabsolute topの数値とdiv heightを調整してやらないといけません

お礼

たびたびの回答ありがとうございます。
画像は一応１列になってます。ソースを改行するとずれますが・・・
皆さんのご意見を参考にあちこちいじってみたところ、どうにか思い通りのものになりました。ありがとうございました。

回答No.3

MAN_MA_RUI

こんなのはどうでしょうか？多分環境互換性もバッチリだと思うんですけど。多分。
Firefoxなど非IE系のブラウザでも上手く表示できるように調整してみましたよ。勝手に。
class名など微妙なところは適当に調整してみてください。

<div class="out">
　<div class="title">
　　<img src="img/title.jpg" width="700" height="75" border="0">
　</div>

　<div class="main">
　　<img src="img/main.jpg" width="700" height="375" border="0">
　</div>
　<div class="menu">
　　<img src="img/home_a.jpg" width="100" height="35" border="0">
　　<img src="img/first.jpg" width="100" height="35" border="0">
　　<img src="img/info.jpg" width="100" height="35" border="0">
　　<img src="img/order.jpg" width="100" height="35" border="0">
　　<img src="img/support.jpg" width="100" height="35" border="0">

　　<img src="img/link.jpg" width="100" height="35" border="0">
　　<img src="img/question.jpg" width="100" height="35" border="0">
　</div>
　<div class="area">
　<div class="hoge">
　　<div class="box">
　　　<h5>AAAAAAAAA</h5>
　　　<img src="img/kari.gif" width="250" height="100" border="0">
　　</div>

　　<div class="box2">
　　　<h5>BBBBBBBBB</h5>
　　　<img src="img/kari2.gif" width="250" height="100" border="0">
　　</div>
　　<div class="clear"></div>
　</div>
</div>
</div>

div.out{
width:700px;
background-color:#ffffff;
}
div.main{
border-style:solid none solid none;
border-width:10px;
border-color:#666666;
}
div.menu{
margin-bottom:50px;
}
div.hoge{
width:520px;
margin-left:auto;
margin-right:auto;
}
div.area{
text-align:center;
padding:0.7em;
border:solid;
border-color:red;
}
div.box{
float:left;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
margin:2px;
}
div.box2{
float:left;
width:250px;
border-style:none solid solid solid;
border-width:1px;
border-color:#99ccff;
background-color:#99ccff;
margin:2px;
}
div.clear{
clear:both;
}
h5{
margin-bottom:0px;
padding:0.5em;
}

お礼

回答ありがとうございます。
皆さんのご意見を参考にあちこちいじってみたところ、どうにか思い通りのものになりました。ありがとうございました。

回答No.1

noname#39970

hタグやimgタグの左右の余白に対して指定が何も無いみたいだけど？

補足

回答ありがとうございます。
<div>～</div>の中にある<img>、<h5>タグに対して余白の指定をしても、ボックス内の余白が調整されるだけなのですが・・・。
上のタグでいう、area内の要素であるbox、box2をfloat:left;で並べたときに、まず余白が出るのが解せないのです。marginを指定しなければぴったりくっつくのだと思うのですが・・・。