floatしたdiv内の要素について
下記のようなHTML、CSSで、
floatしたdiv「leftside」内にp要素を配置すると
p要素の上下に空間が発生します。
このp要素の上下の空間はなんでしょうか？
どうすれば消えますか？
ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。
または、pタグで囲まなくても空間は消えます。
よろしくお願いいたします。
■Html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test_style.css" media="all">
</head>
<body>
<div id="warapper">
<!-- ヘッダ -->
<div id="head">
</div>
<!-- 左サイト -->
<div id="leftside">
<p class="test">leftside</p>
</div>
<!-- コンテンツ -->
<div id="contents">
contents
</div>
<!-- フッター -->
<div id="footer">
<p>fotter</p>
</div>
</div>
</body>
</html>
■Css
@charset "utf-8";
body{
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 90%;
text-align:center;
padding: 0;
margin: 0;
background-color: #fff;
}
#warapper{
text-align: left;
width: 800px;
margin:0 auto; /*ページ全体をセンタリングする指定*/
padding: 0;
background-color: #ffffcc;
}
#head{
background-color: #000;
height: 160px;
margin: 0 0 20px 0;
padding: 0;
position: relative; /*ロゴ画像を右下に配置するため*/
}
#topbar{
background-color: #dcdcdc;
height: 50px;
margin: 0 0 20px 0;
padding: 0;
}
#leftside{
background-color: #ccc;
width: 180px;
float: left;
padding: 0;
margin: 0 0 20px 0; /*下方向に余白を設ける*/
overflow:hidden;
}
#contents{
background-color: pink;
width:600px;
float: right;
padding: 0;
margin: 0 0 20px 0; /*下方向に余白を設ける*/
}
#contents_all{
background-color: pink;
margin: 0 0 20px 0; /*下方向に余白を設ける*/
padding: 0 0 0 0;
}
#footer{
background-color:#666;
text-align: center;
clear: both;
margin: 0;
padding: 0.5em 0;
}
.test {
background-color: red;
}
お礼
ご回答ありがとうございます。返事が遅れてしまってすみません。 記事エリアだけこの症状が出ていて、他のレイアウトの箇所ではこうしたことは起こらないので とても混乱していました・・。しかも、同じ記述内容なのに記事によって表示されたりされなかったりがあったので訳が分からなかったのですが どうやら前の要素や親要素のタグとの間に改行が入っていたり（<br>が自動で入る）、インライン要素が入るとfloatさせたボックスが消えてしまうようです。 （試しに<div>の空タグでfloatさせたボックスを囲うと表示されるようになったり・・） 記事だからといい加減に記述するのではなく、しっかりエリアを区切っていかなければいけないということですよね・・ ちなみに、せっかくお教え戴いているのにですが・・最後の～LayoutなどのCSS3のプロパティだと、どのみちIE8以下は非対応ですよね・・？