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

Question

有人可以解释为什么 #main_content（3 列）和 #footer 之间有白色 space 吗？

上面还有白色space#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）——这就是为什么你在顶部有 space 的原因。段落也有默认边距，可以用 css 删除。例如：

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

* {
   margin: 0;  
   padding: 0;
 }

或者你可以更具体一点：

body { 
  margin:0; 
  padding:0; 
}

p { 
  margin:0; 
  padding:0;
}

Answer 2

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

p {
    margin: 0;
    padding: 0;
}

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

Unwanted White Spacing Between Divs in CSS/html

html

css

margins