html - Flexbox 中元素之间的未知间隙

Question

顶部的红色和蓝色条之间有一个神秘的空间。

我做错了什么？当我删除 main 时，栏消失了。但是 footer 到了顶部？

我做了一个 fiddle :https://jsfiddle.net/v9yrmafw/1/#

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Answer 1

这是由于 margin collapsing 而发生的h1 到 bar div - 所以你可以:

1. 将 h1

   的 margin 重置为零

2. 向bar

   添加填充/边框

请参阅下面的演示 - 我在 bar 中添加了一些填充:

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
  padding: 10px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>