html - 为什么添加 1px 填充在 div 的高度中添加 10px

Question

我正在尝试学习 CSS 基础知识。以下是我无法理解的 HTML 和 CSS

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

.section-title {
  color: #2ddf5c;
}

main {
  background-color: burlywood;
}

#product-overview {
  background: #ff1b68;
  width: 100%;
  height: 528px;
  padding: 10px;
}

.main-header {
  background: #2ddf5c;
  padding: 0px 16px;
}

<header class="main-header">
  <div>
    <a href="index.html">
                    uhost
                </a>
  </div>
  <nav class="main-nav">
    <ul class="main-nav__items">
      <li class="main-nav__item"><a href="#">Packages</a></li>
      <li class="main-nav__item"><a href="#">Customers</a></li>
      <li class="main-nav__item"><a href="#">Start hosting</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve</h1>
  </section>
  <section id="plans">
    <h1>Choose your plan</h1>
  </section>
</main>

我们可以看到红色和绿色区域之间有一个小间隙。据我了解，存在这种差距是因为 nav 和 main 都是块元素。

现在，标题元素的高度是 90px（大约）但是如果我试图更新主标题的填充，那么浏览器正在删除标题和主元素之间的空白区域，并将标题的高度更新为 106px

.main-header {
        background: #2ddf5c;
        padding: 1px 16px;
 }

请帮助我理解为什么会这样。

标签： htmlcss

Answer 1

这与块元素无关。会发生什么：ul标题底部的有一个默认值margin、顶部和底部。margin-bottom离开 标题并创建空白（这称为“折叠边距” ）。

如果您手动将该边距设置为零：

.main-nav ul {
  margin-bottom: 0;
}

，空间消失。但是，当您将 a 添加padding-bottom到标题（无论哪个值）时，（默认）仍然保留margin-bottom在标题元素内 ，也会导致空白消失。ul

这是没有添加填充但标题margin-bottom设置为零的情况：

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

.section-title {
  color: #2ddf5c;
}

main {
  background-color: burlywood;
}

#product-overview {
  background: #ff1b68;
  width: 100%;
  height: 528px;
  padding: 10px;
}

.main-header {
  background: #2ddf5c;
  padding: 0px 16px;
}
.main-nav ul {
  margin-bottom: 0;
}

<header class="main-header">
  <div>
    <a href="index.html">
                uhost
            </a>
  </div>
  <nav class="main-nav">
    <ul class="main-nav__items">
      <li class="main-nav__item"><a href="#">Packages</a></li>
      <li class="main-nav__item"><a href="#">Customers</a></li>
      <li class="main-nav__item"><a href="#">Start hosting</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve</h1>
  </section>
  <section id="plans">
    <h1>Choose your plan</h1>
  </section>
</main>