HTML 导航和 header 标签之间显示不需要的空行

Question

我有一个简单的 html，我想在不更改 HTML 的情况下将其设置为外观不错的页面。但是，当我开始时，我在布局标签之间遇到了那些空行。下面的代码片段显示了 <nav> 和 <header> 标签。为什么它们之间有一个空行。我也试过注释掉标签之间的单个 space，但这没有帮助（这是有道理的，因为单个 space 不应该导致空行）

html {
 font-size:14px;
 font-family: 'Lato';
}
body {
 margin:0;
}
header {
 background: radial-gradient(
  ellipse at center,
  rgba(192,169,145,1) 0%,
  rgba(192,169,145,1) 59%,
  rgba(168,143,121,1) 100%
 );
}
body > nav > * {
 display: inline-block;
}
 nav ul {
  float:right;
 }
 nav ul li {
  display: inline-block;
  list-style: none;
  text-decoration: none;
 }

<body>
    <nav>
        <p class="brand">potato &trade;</p>
        <ul class="nav-primary">
            <li class="nav-item"><a href="#">about</a></li>

            <li class="nav-item"><a href="#">features</a></li>

            <li class="nav-item button-cta"><a href="#">buy it now</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="header-title">
            "sweet nutritious and delicious"
        </h1>

        <h3 class="header-subtitle">
            The key to happiness is hidden in the Potato &trade;
        </h3>

        <img src="img/potato-header.png" alt="Potato" class="header-potato">
    </header>
</body>
</html>

Answer 1

试试这个：

* {
margin: 0;
padding: 0;
}

Answer 2

html {
 font-size:14px;
 font-family: 'Lato';
}
body {
 margin:0;
}
header {
 background: radial-gradient(
  ellipse at center,
  rgba(192,169,145,1) 0%,
  rgba(192,169,145,1) 59%,
  rgba(168,143,121,1) 100%
 );
}
body > nav > * {
 display: inline-block;
}
 nav ul {
  float:right;
 }
 nav ul li {
  display: inline-block;
  list-style: none;
  text-decoration: none;
 }
h1 {
  margin: 0px;
  }
nav {
  background: green;
  }

<body>
    <nav>
        <p class="brand">potato &trade;</p>
        <ul class="nav-primary">
            <li class="nav-item"><a href="#">about</a></li>

            <li class="nav-item"><a href="#">features</a></li>

            <li class="nav-item button-cta"><a href="#">buy it now</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="header-title">
            "sweet nutritious and delicious"
        </h1>

        <h3 class="header-subtitle">
            The key to happiness is hidden in the Potato &trade;
        </h3>

        <img src="img/potato-header.png" alt="Potato" class="header-potato">
    </header>
</body>
</html>

h1 默认有保证金，我只是删除它。检查代码段中的最后一行

Answer 3

您正在处理：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

有几种方法可以处理第一个和最后一个子容器在父容器外折叠的边距（参见上面的 link）：最简单的方法可能是（避免对子容器重置边距）：

header, nav {
  overflow:hidden;
}

下面要测试的代码段：

header, nav {
  overflow:hidden;
}

html {
 font-size:14px;
 font-family: 'Lato';
}
body {
 margin:0;
}
header {
 background: radial-gradient(
  ellipse at center,
  rgba(192,169,145,1) 0%,
  rgba(192,169,145,1) 59%,
  rgba(168,143,121,1) 100%
 );
  }

body > nav > * {
 display: inline-block;
}
 nav ul {
  float:right;
 }
 nav ul li {
  display: inline-block;
  list-style: none;
  text-decoration: none;
 }

<body>
    <nav>
        <p class="brand">potato &trade;</p>
        <ul class="nav-primary">
            <li class="nav-item"><a href="#">about</a></li>

            <li class="nav-item"><a href="#">features</a></li>

            <li class="nav-item button-cta"><a href="#">buy it now</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="header-title">
            "sweet nutritious and delicious"
        </h1>

        <h3 class="header-subtitle">
            The key to happiness is hidden in the Potato &trade;
        </h3>

        <img src="img/potato-header.png" alt="Potato" class="header-potato">
    </header>
</body>
</html>

Answer 4

您的 H1 有 margin-top，添加：

header h1 {
    margin-top: 0;
}

现场演示 - https://jsfiddle.net/grinmax_/rrvpwjxh/

HTML 导航和 header 标签之间显示不需要的空行

HTML unwanted empty lines displayed between nav and header tags

html

css

header

nav