我的导航栏和它下面的 div 之间无法解释的垂直间隙

Question

我的导航元素和它下面的 div 元素之间目前存在无法解释的差距。

在上述间隙上使用检查元素让我参考 body。这意味着在这个差距中几乎没有任何东西。我已经使用 Chrome 开发人员工具来检查 html 文件中已经存在的每个元素的边距和填充，据我所知，确实没有任何东西应该导致间隙。

这是代码。运行新 window 中的代码片段最好：

/* Load required font faces */
@font-face {
    font-family: Nunito;
    src: url("../fonts/Nunito/Nunito-Regular.ttf") format('truetype');
    font-weight: normal;
}

/* CSS for text */
p, a, h1, h2, h3 {
    font-family: Nunito;
}

/* CSS Styles for body */
body {
    margin: 0 !important;
}


/* CSS Styles for the Navbar */
nav {
    height: 8vh;
    padding: 0% 2% 0% 2%;
    background-image: linear-gradient(to right, #00B9FF, #9316FF);
}

nav a {
    color: white;
    font-size: 1.5em;
    text-decoration: none;
}

nav a:hover {
    color: #adadad;
}

#nav-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}

#nav-content {
    width: 100%;
}

.nav-logo {
    float: left;
}

#nav-navigation {
    width: 20%;
    float: right;
    margin: 0;
}

.nav-button {
    display: inline-block;
    margin: 0% 2% 0% 2%;
}

/* CSS for the page header */
#page-header {
    height: 9vh;
    background-color: #F3F3F3;
}

<html>
    <head>
        <title>Webpage</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <!-- Navbar -->
        <nav>
            <div id="nav-wrapper" class="align-middle">
                <div id="nav-content">
                    <!-- Company name on the left of navbar -->
                    <div class="nav-logo">
                        <a href="./">Company Name</a>
                    </div>
                    <!-- Navigation buttons for the navbar -->
                    <ul id="nav-navigation">
                        <li class="nav-button">
                            <a href="./">Nav 1</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 2</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 3</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 4</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 5</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main content -->
        <div id="page-header">
            <div>
                <div>
                    <p>About Company Name</p>
                </div>
                <div>
                    <p>Over here at company....</p>
                </div>
            </div>
        </div>
    </body>
</html>

欢迎任何帮助。谢谢。

Answer 1

您的 p 元素上有边距。这就是造成你差距的原因。如果您设置新的 css 规则：

p {
margin-top:0;
}

甚至：

p {
margin:0;
}

然后它将按预期工作。至少 - 它对我有用运行你的代码片段 - 你的页面上可能还有其他东西这样做，但我认为值得一试。

Answer 2

永远记得重置浏览器默认设置的规则。典型的重置是

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

Answer 3

“page-header”div 中的“p”元素导致了间隙。元素可能有默认边距或填充。您可以像这样在 css 文件的开头重置所有默认边距和填充：

* {
  margin: 0;
  padding: 0;
}

或者您可以 select 某个“p”元素并移除其边距。

我的导航栏和它下面的 div 之间无法解释的垂直间隙

Unexplainable vertical gap between my navbar and the div below it

html

css

margin