任何人都可以找到這個白色空間來自哪裏？

我在這裏有一些非常基本的html和css，並且對於一些reaseon我的圖像，我用我的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{ 

}

來源

2012-12-29 You Me

任何圖片可以幫助我們形象化你的問題？ –

你有鏈接到你的網站？我很懶，看到每一行代碼，只是看到一個錯誤... – Chanckjh

一個JSFiddle再現這個問題將是偉大的 – Josep

負利潤率在整個你的CSS是這個問題的原因：

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

而不是使用大的負利潤率搬東西的，使用花車：http://www.w3schools.com/cssref/pr_class_float.asp。

這是一個來自CSS技巧的教程：http://css-tricks.com/all-about-floats/。

任何你使用負邊距的地方，都需要用浮筒替換。白色空間和預期的一樣，你設定的負邊距對高度沒有貢獻。

來源

2012-12-29 18:17:27

一般來說，要小心w3schools。網站上有一些不好的信息。儘管如此，它在某些情況下會不必要地重新包裝。請務必仔細檢查您獲得的信息。 – Darthg8r

多數民衆贊成它感謝你，我可能不會重做浮游物，但我會增加積極的填充另一邊爲了evn出來 –

任何人都可以找到這個白色空間來自哪裏？

回答

相關問題