爲什麼我會在我的HTML元素之間獲得空白區域？

我正試圖爲我的媽媽揹包客業務設計一個網站。我遇到的問題是在我的橫幅圖像和我的導航欄之間有一個空白的白線，您可以在圖像中看到。我認爲這與邊緣有關，所以我已經將這兩個元素設置爲零來無效。爲什麼我會在我的HTML元素之間獲得空白區域？

還有第二個問題 - 爲什麼我的黑色邊框不能覆蓋主要內容？我認爲自身具有身體背景，它會圍繞身體的每一個元素。

我意識到可能有類似的問題，但我無法在任何地方找到答案。我會欣賞任何人的輸入 - 這是我在這裏的第一篇文章，所以我很抱歉，如果我搞砸了任何格式。

我的網站上的圖像可以在這裏找到：提前

感謝。

目前，我有我的index.html文件下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
     <head> 
     <link rel="stylesheet" type="text/css" href="swaggersstyle.css"> 
      <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title> 
     </head> 


     <body> 
     <img src="final.jpg" id="banner"></img> 
     <ul id="nav"> 
      <li class="links"><a href="index.html">Home</a></li> 
      <li class="links"><a href="planning.html">Planning</a></li> 
      <li class="links"><a href="construction.html">Construction</a></li> 
      <li class="links"><a href="evaluation.html">Evaluation</a></li> 
     </ul> 

     <div id="mainc"> 
     <p>Make Yourself at Home</p> 
    <p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p> 

     </div> 

    </body> 
    </html>

和下面的CSS代碼：

html{ 
    font-family: sans-serif; 
    background-color:#464E54; 
} 

body{ 
    width: 960px; 
    margin: auto; 
    background-color: white; 
    border: 5px solid black; 
} 

#banner{ 
    padding: 0px; 
    margin: 0; 
} 

#nav { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 

} 

#mainc { 

    width: 960px; 
    float: right; 
    background-color: white; 
    margin: 0; 
} 

.links { 
    float: left; 
    margin: 0px; 
} 

a:link, a:visited { 

    display: block; 
    width: 232px; 
    font-weight: bold; 
    color: grey; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:hover, a:active{ 

    background-color: #333333; 
}

來源

2011-09-18 AndyNZ

可以發佈網站，並給我們的在線鏈接？ –

http://pastebin.me/188842111b3069a3aa51932b1e021bd4 – sinelaw

我遇到的問題是在我的橫幅圖像和我的導航欄之間有一個空白的白線，您可以在圖像中看到。我認爲這與邊緣有關，所以我已經將這兩個元素設置爲零來無效。

在HTML圖像中默認使用內聯級別元素，所以它們遵循文本規則（並且將在下面留出空白以保持與諸如「p」等字母的正確對齊）。您可以指定display: block的標題圖片，或定義頁眉容器具有相同的確切高度的圖像

而且第二個問題 - 爲什麼我的黑色邊框不包括的主要內容呢？我認爲自身具有身體背景，它會圍繞身體的每一個元素。

因爲浮動元素蹦出來的容器，你必須清除浮到容器的東西延長像

<div style="clear: both"></div>

，或者使用一些復位/ clearfix CSS如html5boilerplate提供的一個。

來源

2011-09-18 08:34:15

如果刪除的#mainc的float屬性，則邊框將環繞所有的內容。通過使用浮點數，您將div帶出主頁面流程。

來源

2011-09-18 08:31:09

添加到您的CSS

#banner { display: block; }

來源

2011-09-18 08:34:51

爲什麼我會在我的HTML元素之間獲得空白區域？

回答

相關問題