Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 为什么我的HTML元素之间有空白?_Css_Html_Web - Fatal编程技术网

Css 为什么我的HTML元素之间有空白?

Css 为什么我的HTML元素之间有空白?,css,html,web,Css,Html,Web,我正试图为我妈妈的背包客业务设计一个网站。我遇到的问题是在我的横幅图像和导航栏之间有一条空白的白线,你可以在图像中看到。我认为这是与边距有关的,所以我将这两个元素的边距都设置为零,但没有效果 还有第二个问题——为什么我的黑色边框没有涵盖主要内容?我想,因为它是一个身体背景,它会围绕着身体的每一个元素 我意识到可能有类似的问题,但我在任何地方都找不到答案。我将感谢任何人的输入-这是我在这里的第一篇文章,所以我很抱歉,如果我搞砸了任何格式 我的网站的图片可以在这里找到: 提前谢谢 我当前在inde

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

还有第二个问题——为什么我的黑色边框没有涵盖主要内容?我想,因为它是一个身体背景,它会围绕着身体的每一个元素

我意识到可能有类似的问题,但我在任何地方都找不到答案。我将感谢任何人的输入-这是我在这里的第一篇文章,所以我很抱歉,如果我搞砸了任何格式

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

提前谢谢

我当前在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>

如果删除
#mainc
float
属性,则边框将包围所有内容。通过使用float,可以将
div
从主页流中取出

我遇到的问题是在我的横幅图像和导航栏之间有一条空白的白线,你可以在图像中看到。我认为这是与边距有关的,所以我将这两个元素的边距都设置为零,但没有效果

在HTML中,默认情况下,图像是内联级别的元素,因此它们遵循文本规则(下面有空格,以保持与“p”等字母的正确对齐)。您可以将
display:block
指定给标题图像,也可以将标题容器定义为与图像具有相同的精确高度

还有第二个问题——为什么我的黑色边框没有涵盖主要内容?我想,因为它是一个身体背景,它会围绕着身体的每一个元素

因为浮动元素会从其容器中弹出,所以必须清除浮动以使用以下内容扩展容器

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

或者使用一些reset/clearfix css,如提供的css。

添加到css中

#banner { display: block; }

你能发布这个网站并给我们一个在线链接吗?
#banner { display: block; }