删除 HTML 文档中的边框间隙

Question

我正在学习 HTML，我创建了一个带有 header 栏的 dead-simple 页面，但是 header 和两侧之间有一个空隙& 由于某种原因在页面顶部，如下图所示：

enter image description here

有办法去除吗？代码：`

<style>

    html {
        background: url('background.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding-top: 10px;
        padding-left: 800px;
        overflow: hidden;
        background-color: rgba(0,0,0,.3);
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: grey;
        text-align: center;
        padding: 14px 24px;
        text-decoration: none;
        font-size: 20px;
        font-weight: lighter;
        font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    }

    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111;
    }


</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<ul>
    <li><a href="default">Home</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

`

Answer 1

将此添加到您的 CSS

*{
  margin: 0;
  padding: 0
}

Answer 2

Html 每个容器都有一个默认的边距和填充值。所以你的标题正在使用它，因为你没有明确指定。

所以，你可以设置默认为0，这样就不会出现下图的空隙了-

<style>

        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

</style>

删除 HTML 文档中的边框间隙

Remove border gap in HTML doc

html

css

border