CSS / html中div之间不需要的白色间距



有人可以解释为什么#main_content(3 列)和#footer之间有空格吗?

上方还有空白#main_content

此外,<p>文本未对齐。

我试图将margin:0;padding:0;添加到不同的divs,但它似乎不起作用。 希望有人能对此事有所了解。 谢谢!

#main_content{
	width:960px;
	margin: 0 auto;
	padding: 0;
}
#left_content{
	background-color: red;
	width:280px;
	min-height: 350px;
	float: left;
}
#middle_content{
	background-color: orange;
	margin-left:280px;
	margin-right:280px;
	min-height: 350px;
}
#right_content{
	background-color: green;
	width:280px;
	float:right;
	min-height: 350px;
}
#footer{
	min-height: 100px;
	background-color: grey;
}
<html>
<head>
	<link href="testcss.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main_content">
		<div id="left_content">
			<p>Lorem ipsum dolor sit amet, exercitation lorem wisi non, vitae dolor, ipsum interdum nam sociosqu quis rutrum, qui enim vel mattis proin nulla. Rutrum arcu viverra vestibulum in quisque nullam, et vivamus, ut malesuada in. Arcu dolor in magna pede, turpis mauris, erat sed enim metus wisi vestibulum, molestie rhoncus, nunc at sed taciti eu et. Duis nibh porta purus, donec posuere vestibulum sit, magna sit elementum, aenean volutpat</p>
</div>
	<div id="right_content">
			<p>Sociis vel magna nec, lorem magna duis. Nulla at ut vel, corrupti non ridiculus pellentesque dapibus iaculis. Nibh ultricies mollis eget sodales inceptos odio, nonummy auctor enim pellentesque. Quis arcu amet. Accumsan morbi nec risus, scelerisque nec amet semper duis purus class, cras amet vel eu praesent mauris, velit nisl vestibulum interdum turpis neque fermentum, sollicitudin nulla amet adipiscing non et et. Volutpat erat.</p>
</div>
	<div id="middle_content" >
			<p>nec dignissimos magna wisi vitae. Quis auctor sapien suspendisse enim leo ac, quisque aliquet velit quis inceptos, sed quisque mattis eget lectus laoreet, est sagittis eu elementum rutrum. Elit fusce sodales aliquet et diam placerat, porttitor imperdiet praesent at id, nascetur suscipit, nisl et nulla. Ac at urna maecenas, vitae ullamcorper nunc aliquam, viverra habitasse id etiam aliquam. In dolores, accumsan nec ligula dolor felis.</p>
</div>
	<div id="footer">
			<p>nec dignissimos magna wisi vitae. Quis auctor sapien suspendisse enim leo ac, quisque aliquet velit quis inceptos, sed quisque mattis eget lectus laoreet, est sagittis eu elementum rutrum. Elit fusce sodales aliquet et diam placerat, porttitor imperdiet praesent at id, nascetur suscipit, nisl et nulla. Ac at urna maecenas, vitae ullamcorper nunc aliquam, viverra habitasse id etiam aliquam. In dolores, accumsan nec ligula dolor felis.</p>
</div>
</div>
</body>
</html>

浏览器为

body 元素定义默认边距(通常为 8px) - 这就是为什么顶部有空间的原因。段落也有默认边距,可以用 css 删除。例如:

您可以将所有元素的边距和填充重置为零:

* {
   margin: 0;  
   padding: 0;
 }

或者你可以更具体:

body { 
  margin:0; 
  padding:0; 
}
p { 
  margin:0; 
  padding:0;
}

原因是 p 元素上有上/下边距,所以只需添加:

p {
    margin: 0;
    padding: 0;
}

最新更新