删除 flexbox 容器下方的空格答案

【问题标题】：Remove whitespace below flexbox container删除 flexbox 容器下方的空格
【发布时间】：2017-06-09 15:20:41
【问题描述】：

我正在尝试设计一个登录页面，其中不同部分具有不同的背景颜色。第一个部分容器（棕色背景）是一个用于定位子元素的 Flexbox。在第一部分下方是另一个容器（蓝色背景），它也跨越了页面的整个宽度。

问题：两个容器之间有一些空白，我无法删除。

body {
  margin: 0;
}

.about-container {
  width: 100%;
  height: 490px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background: #605B56;
}

#title {
  font-size: 28px;
  font-weight: 200;
  color: #8EB8E5;
}

.pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #8EB8E5;
}

p {
  text-align: right;
  color: $white;
}

h3 {
  text-align: center;
}

.section-container {
  background: #8EB8E5;
}

<div class="about-container">
  <div class="about-text">
    <h3 id="title">Title</h3>
    <p> Lorem ipsum dolor sit amet</p>
  </div>
  <div class="pic"></div>
</div>
<div class="section-container">
  <h3>
    Section Title
  </h3>
  Some text for the next section
</div>

JSFiddle：https://jsfiddle.net/z4oecan1/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您的<h3> 元素具有默认边距；去掉它。如果您需要将其向下推，请在 <h3> 上使用填充。

body {
  margin: 0;
}

.about-container {
  width: 100%;
  height: 490px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background: #605B56;
}

#title {
  font-size: 28px;
  font-weight: 200;
  color: #8EB8E5;
}

.pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #8EB8E5;
}

p {
  text-align: right;
  color: $white;
}

h3 {
  text-align: center;
  margin: 0;
}

.section-container {
  background: #8EB8E5;
}

<div class="about-container">
  <div class="about-text">
    <h3 id="title">Title</h3>
    <p> Lorem ipsum dolor sit amet</p>
  </div>
  <div class="pic"></div>
</div>
<div class="section-container">
  <h3>
    Section Title
  </h3>
  Some text for the next section
</div>

另一种选择是保留页边距并将overflow:auto 添加到section-container div 以修复折叠的页边距。

body {
  margin: 0;
}

.about-container {
  width: 100%;
  height: 490px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background: #605B56;
}

#title {
  font-size: 28px;
  font-weight: 200;
  color: #8EB8E5;
}

.pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #8EB8E5;
}

p {
  text-align: right;
  color: $white;
}

h3 {
  text-align: center;
}

.section-container {
  background: #8EB8E5;
  overflow:auto;
}

<div class="about-container">
  <div class="about-text">
    <h3 id="title">Title</h3>
    <p> Lorem ipsum dolor sit amet</p>
  </div>
  <div class="pic"></div>
</div>
<div class="section-container">
  <h3>
    Section Title
  </h3>
  Some text for the next section
</div>

【讨论】：

谢谢。新手犯的错误对不起：|

【解决方案2】：

这是由于第二部分中h3 的默认边距顶部超出了其容器（正在折叠边距......）

为避免这种情况，请为该h3 设置margin-top: 0，并在其上方重新创建空间，向其添加padding-top。

https://jsfiddle.net/031p3m04/1/

【讨论】：