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;
}
