Question

我一直在使用CSS和HTML来创建一个横幅和导航栏。我一直试图让它坚持到顶部，但在我看到它的铬后，我注意到身体标签和HTML标签都被分离了。我已经尝试从每个可能负责空间的部分中删除所有边距和填充，但我无法摆脱它。有什么好办法呢？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style/normalize.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrapper">
        <header>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="demo.html">Demo</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

CSS代码：

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: 0;
    padding: 0;
}

header {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

 nav
{
  text-align: left;
}

nav ul
{
  list-style: none;
  /*margin: 0 10; corrected*/
  margin: 0;
  padding: 0;
}

nav li
{
  display: inline-block;
}

nav a
{
  font-weight: 800;
  padding: 15px 10px;
  font-size: 1em;
}

屏幕截图（根据要求提供）：

Screenshot

Answer 1

2年后 - 我刚刚解决了类似的问题 - 我有额外的空间。尝试在第一个之前删除空白的空白（它用空格或代码中的标签缩进）

Answer 2

您可以使用此代码段

body{
    margin: 0%;   
}

有关更多信息，请访问给定网站：

https://www.w3schools.com/css/css_boxmodel.asp

Answer 3

您可以使用以下代码

删除空格

nav ul {
list-style: outside none none;
padding: 0px;
margin-top: 0px;
}

Answer 4

我刚才有类似的问题，我用

解决了

header {
    position: absolute;
    top: 0;
    right: 0;
}

Answer 5

我在这里尝试了所有解决方案，但实际上没有任何效果，主要是因为我的简单页面或标题中没有导航。

对我有用的是使用通用选择器，如下所示：

*, html, body {
   margin: 0;
   padding: 0;
}

4年后，希望它能对某人有所帮助。

如何删除正文和页面顶部之间的空格

5 个答案: