删除flexbox容器下面的空格

Question

我正在尝试设计一个着陆页，其中不同的部分具有不同的背景颜色。第一部分容器（棕色背景）是用于定位子元素的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/

Answer 1

您的 public string InjectAHtmlRandomallyIntoArticle(string originalArticleHtmlCode, string HtmlToInject) { HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument(); doc.LoadHtml(input); HtmlAgilityPack.HtmlNodeCollection pars = new HtmlAgilityPack.HtmlNodeCollection(doc.DocumentNode.ParentNode); pars = doc.DocumentNode.SelectNodes("//p"); foreach(HtmlAgilityPack.HtmlNode par in pars) { } } 元素有默认保证金;去掉它。如果您需要将其按下，请使用<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 div以修复折叠边距。

section-container

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;
}

Answer 2

由于第二部分中h3的默认保证金最高限额超出了其容器（折边利润......）

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

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