Question

有人可以解释为什么#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>

Answer 1

浏览器为body元素定义默认边距（通常为8px） - 这就是为什么你在顶部有空格的原因。段落也有一个默认的边距，可以用css删除。例如：

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

* {
   margin: 0;  
   padding: 0;
 }

或者你可以更具体：

body { 
  margin:0; 
  padding:0; 
}

p { 
  margin:0; 
  padding:0;
}

Answer 2

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

p {
    margin: 0;
    padding: 0;
}

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

2 个答案: