谁能找到这个空白的来源？答案

【问题标题】：Can anyone find where this white space is coming from?谁能找到这个空白的来源？
【发布时间】：2012-12-30 02:17:27
【问题描述】：

我在这里有一些非常基本的 html 和 css，出于某种原因，我用 css 设置的图像作为背景图像没有垂直重复，或者如果它被这个空白区域覆盖，但主要她的问题是，从我的图像不再垂直重复的地方开始，有纯白色空间，我什至尝试设置#content2 的背景颜色，而空白甚至超过了它。谁能看到我错过了什么？ HTML：

<!DOCTYPE html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<title></title>
</head>

<body>
<div id="body">
<div id="wrap">

<!--header starts-->
<div id="header">
<div id="name">
<h1>Comp <span>any</span> Name</h1>
</div><!--end name-->   
<div id="nav"><br>
    <ol>
        <li><a href="programs.html">Our Programs</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="index.html">Home</a></li>
    </ol>
</div><!--end nav-->
</div><!--end header-->
<!--header ends-->

<!--content1 starts-->
<div id="content1">
<img src="images/placeholder.png" width="400" height="323" alt="logo"> 
<div id="imgright">
<h2>What We Do</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit, sed do eiusmod tempor incididunt ut labore et 
    dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut 
    aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint 
    occaecat cupidatat non proident, sunt in culpa qui o
    fficia deserunt mollit anim id est laborum."</p>
<div id="button">
<h4>Request A Program</h4>
</div><!--end button-->
</div><!--end imgright-->
</div><!--end content1-->
<!--content1 ends-->

<!--content2 starts-->
<div id="content2">
<div id="one">
  <img src="images/arrow.png" width="16" height="14" alt="arrow1">
  <h3>Contact Us</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p> 
</div><!--end one-->

<div id="two">
  <img src="images/arrow.png" width="16" height="14" alt="arrow2"> 
  <h3>About Us</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p>
</div><!--end two-->

<div id="three">
  <img src="images/arrow.png" width="16" height="14" alt="arrow3"> 
  <h3> View Our Programs</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p>
</div><!--end three-->  
</div><!--end content2-->
<!--content2 ends-->

<!--footer starts-->
<div id="footer">
<h5>Insert some footer information, copyright information also</h5>    
</div>    <!--end footer-->
<!--footer ends-->
</div><!--end wrap-->
</div><!--end body-->
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

html, body{
margin:0;
padding:0;
}

#body{
background-image:url(images/background.jpg);
background-repeat:repeat;
margin-top:-25px;
padding:0;  
}
#wrap{
border-width:3px;
border-style:solid;
border-color:white;
width:1024px;
height:100%;
margin:0 auto;
padding-top:5px;
}

#header h1{
font-size:36px;
font-family: Terminal, Verdana, Geneva, sans-serif;
color: white;
}

span{
font-size:100px;
color:black;
font-family:brush script std, Verdana, Geneva, sans-serif;
}

#nav{
margin-top:-110px;
margin-bottom:75px;
margin-right:40px;
}

#nav ol {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#nav li {
display: block;
float: right;
}

#nav a {
display: block;
float: left;
margin-right: 3px;
padding: 10px 20px;
text-decoration: none;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: white;
}

#nav a:hover { 
text-decoration: none; 
color: black;
}

#content1 img{
margin-left:25px;
}

#imgright{
margin-left:445px;
margin-top:-389px;
}

#button h4{
font-family:"Times New Roman", Times, serif;
font-size:24px;
color:white;
}

h2{
font-family:"Times New Roman", Times, serif;
font-size:48px;
}

#imgright p{
color: white;
font-size:24px;
font-family: "Times New Roman", Times, serif;
margin-top:-30px;
margin-left:20px;
}

#content2{
background-color:#2e3192;
}

#one, #two, #three{width:341.3px;}

#one h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#one p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#two h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#two p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#three h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;    
}

#three p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#one{
margin-top:50px;
}

#two{
margin-top:-104px;
margin-left:360px;
}

#three{
margin-top:-408px;
margin-left:720px;
}

#footer{

}

【问题讨论】：

有什么图片可以帮助我们了解您的问题吗？
您的网站有链接吗？我很懒的看每一行代码，只为了看到一个错误……
一个 JSFiddle 重现这个问题会很棒
请添加一个 jsFiddle.net 示例。
@YouMe 你应该回去接受一些正确的答案。如果您从不接受答案，那么将来没有人愿意回答您的问题。

标签： html css image background whitespace

【解决方案1】：

整个 CSS 中的负边距是导致此问题的原因：

#two {
    margin-top: -104px;
    margin-left: 360px;
}

不要使用大的负边距来移动东西，而是使用浮点数：http://www.w3schools.com/cssref/pr_class_float.asp。

这是来自 CSS-tricks 的教程：http://css-tricks.com/all-about-floats/。

任何你使用负边距的地方，你都需要用浮点数替换。空白符合预期，您设置的负边距对高度没有影响。

【讨论】：

一般来说，要小心 w3schools。网站上有一些不好的信息。不过，在某些情况下，它会不必要地包装不好。请务必仔细检查您获得的信息。
就是这样，谢谢，我可能不会重做浮动，但我会在另一侧添加正填充以使其平衡