为什么添加 1px 填充在 div 的高度中添加 10px [重复]答案

【问题标题】：Why adding 1px padding adding 10px in height of div [duplicate]为什么添加 1px 填充在 div 的高度中添加 10px [重复]
【发布时间】：2021-05-15 11:03:59
【问题描述】：

我正在努力学习 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;
 }

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

【问题讨论】：

只需使用浏览器的开发工具（Windows 上的 F12）检查元素即可找出某些观察到的行为的来源。

标签： html css

【解决方案1】：

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

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

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

，空格消失。但是，当您将padding-bottom 添加到标头（无论是哪个值）时，ul 的（默认）margin-bottom 仍保留在 inside 标头元素中，这也会导致空白消失。

这是没有添加填充，但标题的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>

【讨论】：

知道了。谢谢！

【解决方案2】：

好吧，我不确定我是否理解正确，您是否为这两个元素之间的白色间隙而烦恼？（我没有权限评论你的问题）

如果是这样，白色间隙的原因是因为 UL 元素具有浏览器为它们提供的“默认”样式。您需要通过以下方式更改这些默认样式设置：

ul {
    margin: 0;
}

希望我没听错:)

【讨论】：