为什么我会在我的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; 
}

可以发布网站，并给我们的在线链接？ –

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

答

我遇到的问题是在我的横幅图像和我的导航栏之间有一个空白的白线，您可以在图像中看到。我认为这与边缘有关，所以我已经将这两个元素设置为零来无效。

在HTML图像中默认使用内联级别元素，所以它们遵循文本规则（并且将在下面留出空白以保持与诸如“p”等字母的正确对齐）。您可以指定display: block的标题图片，或定义页眉容器具有相同的确切高度的图像

而且第二个问题 - 为什么我的黑色边框不包括的主要内容呢？我认为自身具有身体背景，它会围绕身体的每一个元素。

因为浮动元素蹦出来的容器，你必须清除浮到容器的东西延长像

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

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

答

如果删除的#mainc的float属性，则边框将环绕所有的内容。通过使用浮点数，您将div带出主页面流程。

答

添加到您的CSS

#banner { display: block; }

为什么我会在我的HTML元素之间获得空白区域？

相关推荐