Question

我正在为我的妈妈背包客生意设计一个网站。我遇到的问题是在我的横幅图像和导航栏之间有一条空白线，您可以在图像中看到。我认为这与保证金有关，因此我将其设置为零，这两个要素都无济于事。

还有第二个问题 - 为什么我的黑色边框也不包括主要内容？我认为，因为它的身体背景会绕过身体的每个元素。

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

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

提前致谢。

我目前在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;
}

Answer 1

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

在HTML图像中默认使用内联级别元素，因此它们遵循文本规则（并且下方将有空白区域以保持与“p”等字母的正确对齐）。您可以将display: block指定给标题图像，也可以将标题容器定义为与图像具有相同的高度

还有第二个问题 - 为什么我的黑色边框也不包括主要内容？我认为，因为它的身体背景会绕过身体的每个元素。

因为浮动元素从其容器中弹出，您必须清除浮动以使用类似

的扩展容器

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

或使用某些reset / clearfix css，例如html5boilerplate提供的css。

Answer 2

添加到您的CSS

#banner { display: block; }

Answer 3

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

为什么我的HTML元素之间会出现空格？

3 个答案: