删除两个部分之间的白色 space

Question

我有两个这样的部分：

<section id="achievements"> ... </section>
<section id="services"> ... </section>

中间有一个白色的space。虽然我的其余部分并非如此。

我没有为部分设置任何显示属性，但它从 css 文件继承块的显示属性。（通过 Chrome 中的开发者工具进行检查）

我还检查了这两个部分的内容，如果出于某种原因这些部分出现了任何内容。好像不是这样。

是什么导致了这种白色 space，我该如何去除它？

PS：让我知道是否应该添加更多信息。

PS2：我在这个网站上查看的帖子谈到从 inline-block 元素中删除白色 space。

更新

这里是相关部分的Fiddle：

/* main */

body {
  font-family: "Montserrat", sans-serif;
  margin: 0px;
  padding: 0px;
}
.upper {
  text-transform: uppercase;
}
/* Positioning */

.vertically_centered {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.left {
  float: left;
}
.right {
  float: right;
}
/* For tagline sections in 5 articles */

.tagline {
  height: 305px;
  padding: 0;
  margin: 0;
}
.tagline_text {
  margin: auto;
  text-align: center;
}
.tagline_sub {
  font-size: 18px;
  color: #999999;
}
.bottom_line:after {
  content: "";
  display: block;
  width: 60px;
  border-bottom: 3px solid #b3b3b3;
  margin: 30px auto 40px;
}
/* row 4: achievements */

#achievements,
#achievements article {
  height: 320px;
  margin: 0px;
  padding: 0px;
}
#experiments {
  background-color: #1a1a1a;
  width: 33.33%;
  height: 320px;
}
#awards {
  background-color: #212121;
  width: 33.33%;
  height: 320px;
}
#messages {
  background-color: #262626;
  width: 33.33%;
  height: 320px;
}
.results {
  margin: auto;
  height: 35%;
  width: 75%;
  text-align: center;
}
.data_set {
  width: 70%;
}
.number {
  font-size: 42px;
  color: white;
}
.details {
  font-size: 16px;
  color: #cccccc;
}
.first_icon_set {
  max-width: 30%;
  height: auto;
}
/* row 5: services */

#services {
  background-color: #e6e6e6;
  height: 1005px;
  margin: 0px;
  padding: 0px;
}
#services_details {
  height: 700px;
  width: 100%;
}
.services_box {
  background-color: white;
  width: 32%;
  height: 330px;
  margin: 20px 0.66% 0% 0.66%;
  text-align: center;
}
.services_box p {
  padding: 0 15px 0 20px;
}
.icon_set_services {
  width: 60%;
}
#services_details_sub {
  margin-top: 25px;
  font-size: 14px;
  color: #999999;
  line-height: 25px;
}

<div class="">
  <!-- row 4: achievements -->
  <section class="" id="achievements">
    <article id="experiments" class="left">
      <section class="results vertically_centered">
        <img src="icons/flask.svg" alt="enigma_flask_icon" class="first_icon_set left"></img>
        <div class="data_set upper left">
          <p class="number">1200</p>
          <p class="details">design experiments</p>
        </div>
      </section>
    </article>
    <article id="awards" class="left">
      <section class="results vertically_centered">
        <img src="icons/trophy.svg" alt="enigma_trophy_icon" class="first_icon_set left"></img>
        <div class="data_set upper left">
          <p class="number">578</p>
          <p class="details">awards won</p>
        </div>
      </section>
    </article>
    <article id="messages" class="left">
      <section class="results vertically_centered">
        <img src="icons/envelope.svg" alt="enigma_trophy_icon" class="first_icon_set left"></img>
        <div class="data_set upper left">
          <p class="number">12489</p>
          <p class="details">messages sent</p>
        </div>
      </section>
    </article>
  </section>

  <!-- Remove white space from top-->
  <!-- row 5: services -->
  <section id="services">
    <article class="tagline">
      <section class="tagline_text vertically_centered">
        <h2 class="upper bottom_line">Our services</h2>
        <p class="tagline_sub">Continuously Creating Daring Digital Solutions</p>
      </section>
    </article>
    <article id="services_details">
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/star.svg" alt="enigma_star_icon" class="icon_set_services"></img>
          <h4 class="upper">Great design</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/files.svg" alt="enigma_files_icon" class="icon_set_services"></img>
          <h4 class="upper">Perfect coding</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/graph.svg" alt="enigma_graph_icon" class="icon_set_services"></img>
          <h4 class="upper">Marketing</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/face.svg" alt="enigma_face_icon" class="icon_set_services"></img>
          <h4 class="upper">Support</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/gear.svg" alt="enigma_gear_icon" class="icon_set_services"></img>
          <h4 class="upper">Development</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/screen.svg" alt="enigma_screen_icon" class="icon_set_services"></img>
          <h4 class="upper">Web design</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
    </article>
  </section>
</div>

Answer 1

您可以尝试使用 margin-(right/left/bottom/top):0px

Answer 2

您需要将 margin:0; 添加到 h2

.upper {margin:0;}

Answer 3

这就是所谓的collapsed margins

您需要从 child h2

重置默认值 margin

注：

小心img是自闭标签

/* main */

body {
  font-family: "Montserrat", sans-serif;
  margin: 0px;
  padding: 0px;
}
.upper {
  text-transform: uppercase;
  margin:0
}
/* Positioning */

.vertically_centered {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.left {
  float: left;
}
.right {
  float: right;
}
/* For tagline sections in 5 articles */

.tagline {
  height: 305px;
  padding: 0;
  margin: 0;
}
.tagline_text {
  margin: auto;
  text-align: center;
}
.tagline_sub {
  font-size: 18px;
  color: #999999;
}
.bottom_line:after {
  content: "";
  display: block;
  width: 60px;
  border-bottom: 3px solid #b3b3b3;
  margin: 30px auto 40px;
}
/* row 4: achievements */

#achievements,
#achievements article {
  height: 320px;
  margin: 0px;
  padding: 0px;
}
#experiments {
  background-color: #1a1a1a;
  width: 33.33%;
  height: 320px;
}
#awards {
  background-color: #212121;
  width: 33.33%;
  height: 320px;
}
#messages {
  background-color: #262626;
  width: 33.33%;
  height: 320px;
}
.results {
  margin: auto;
  height: 35%;
  width: 75%;
  text-align: center;
}
.data_set {
  width: 70%;
}
.number {
  font-size: 42px;
  color: white;
}
.details {
  font-size: 16px;
  color: #cccccc;
}
.first_icon_set {
  max-width: 30%;
  height: auto;
}
/* row 5: services */

#services {
  background-color: #e6e6e6;
  height: 1005px;
  margin: 0px;
  padding: 0px;
}
#services_details {
  height: 700px;
  width: 100%;
}
.services_box {
  background-color: white;
  width: 32%;
  height: 330px;
  margin: 20px 0.66% 0% 0.66%;
  text-align: center;
}
.services_box p {
  padding: 0 15px 0 20px;
}
.icon_set_services {
  width: 60%;
}
#services_details_sub {
  margin-top: 25px;
  font-size: 14px;
  color: #999999;
  line-height: 25px;
}

<div class="">
  <!-- row 4: achievements -->
  <section class="" id="achievements">
    <article id="experiments" class="left">
      <section class="results vertically_centered">
        <img src="icons/flask.svg" alt="enigma_flask_icon" class="first_icon_set left"/>
        <div class="data_set upper left">
          <p class="number">1200</p>
          <p class="details">design experiments</p>
        </div>
      </section>
    </article>
    <article id="awards" class="left">
      <section class="results vertically_centered">
        <img src="icons/trophy.svg" alt="enigma_trophy_icon" class="first_icon_set left"/>
        <div class="data_set upper left">
          <p class="number">578</p>
          <p class="details">awards won</p>
        </div>
      </section>
    </article>
    <article id="messages" class="left">
      <section class="results vertically_centered">
        <img src="icons/envelope.svg" alt="enigma_trophy_icon" class="first_icon_set left"/>
        <div class="data_set upper left">
          <p class="number">12489</p>
          <p class="details">messages sent</p>
        </div>
      </section>
    </article>
  </section>

  <!-- Remove white space from top-->
  <!-- row 5: services -->
  <section id="services">
    <article class="tagline">
      <section class="tagline_text vertically_centered">
        <h2 class="upper bottom_line">Our services</h2>
        <p class="tagline_sub">Continuously Creating Daring Digital Solutions</p>
      </section>
    </article>
    <article id="services_details">
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/star.svg" alt="enigma_star_icon" class="icon_set_services"/>
          <h4 class="upper">Great design</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/files.svg" alt="enigma_files_icon" class="icon_set_services"/>
          <h4 class="upper">Perfect coding</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/graph.svg" alt="enigma_graph_icon" class="icon_set_services"/>
          <h4 class="upper">Marketing</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/face.svg" alt="enigma_face_icon" class="icon_set_services"/>
          <h4 class="upper">Support</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/gear.svg" alt="enigma_gear_icon" class="icon_set_services"/>
          <h4 class="upper">Development</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
      <section class="services_box left">
        <div class="vertically_centered">
          <img src="icons/screen.svg" alt="enigma_screen_icon" class="icon_set_services"/>
          <h4 class="upper">Web design</h4>
          <p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
        </div>
      </section>
    </article>
  </section>
</div>

Answer 4

使用这个：我用 fiddle 测试了它并且有效。

#services {
  background-color: #e6e6e6;
  height: 1005px;
  margin: 0px;
  padding: 0px;
  float: left;
  clear: none;
}

或者您可以将其与 div 一起使用：

<div id="first_div">
        ...
    </div><div id="second_div">
        ...
    </div>

通过将 div 置于内联，它会删除元素之间的 space，因为如果中间有 space，它就会在布局中变为 space。

Answer 5

第二个 <h2> 中的 margin <section> 造成了您的部分之间的差距。

您可以通过向 <h2> 添加 class 并像这样设置 margin-top: 0; 来更正它：

html:

<h2 class="fix-gap upper bottom_line">Our services</h2>

css:

.fix-gap {
  margin-top: 0;
}

Answer 6

如果您遇到过这些问题，找到解决方案的最佳方法是检查元素。在这里，当您执行此操作时，您将能够看到默认边距。所以为了摆脱这个，转到你的 CSS 文件并设置 margin: 0;这应该有所帮助。

删除两个部分之间的白色 space

Removing white space between two sections

html

css

whitespace

sections