为什么我的 HTML 元素之间出现空白？答案

【问题标题】：Why am I getting white space between my HTML element?为什么我的 HTML 元素之间出现空白？
【发布时间】：2011-09-18 16:34:51
【问题描述】：

我正在尝试为我的妈妈背包客业务设计一个网站。我遇到的问题是在我的横幅图像和导航栏之间，您可以在图像中看到一条空白白线。我认为这与边距有关，所以我将这两个元素都设置为零无济于事。

还有第二个问题 - 为什么我的黑色边框也没有覆盖主要内容？我认为既然它是一个身体背景，它会绕过身体中的每个元素。

我意识到可能有类似的问题，但我无法在任何地方找到答案。我会感谢任何人的意见 - 这是我在这里的第一篇文章，如果我搞砸了任何格式，我很抱歉。

我的网站图片可以在这里找到：

http://postimage.org/image/20dhjcdb8/

提前致谢。

我的 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;
}

【问题讨论】：

你能发布网站并给我们一个在线链接吗？
pastebin.me/188842111b3069a3aa51932b1e021bd4

标签： css html web

【解决方案1】：

我遇到的问题是在我的横幅图像和导航栏之间，您可以在图像中看到一条空白白线。我认为这与边距有关，因此我将这两个元素都设置为零无济于事。

在 HTML 中，图像默认是内联级元素，因此它们遵循文本规则（并且下面会有空格以保持与“p”等字母的正确对齐）。您可以将display: block 分配给标题图像，或者将标题容器定义为与图像具有相同的高度

还有第二个问题 - 为什么我的黑色边框也没有覆盖主要内容？我认为既然它是一个身体背景，它会绕过身体中的每个元素。

因为浮动元素会从它们的容器中弹出，所以您必须清除浮动以使用类似

的内容扩展容器

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

或使用一些重置/clearfix css，例如 html5boilerplate 提供的 css。

【讨论】：

【解决方案2】：

添加到你的 CSS

#banner { display: block; }

【讨论】：

【解决方案3】：

如果您删除#mainc 的float 属性，则边框将包围所有内容。通过使用浮动，您可以将div 从主页面流中移除。

【讨论】：