如何删除这些部分之间的空格？

Question

据我所知，我还没有做错任何事。 我正在研究一个学校项目，使HTML / CSS / JS中的.PSD模板完全相同。 我添加了我的CSS。

HTML：

   <div class="center">

      <div class="services col-lg-3 col-md-3">
      more div's above ...</div>
      <div class="services col-lg-3 col-md-3">
          <img class=serviceimg src="img/raket.png" />
          <p class=deeltitel2>Rocket services</p>
          <p class=tekst2><?php include 'main/inc/mintekst.php'; ?></p>
      </div>
   </div>
</section>
<!--Here is nothing-->
<section id="section3">
   <h1 class="titel">MEET OUR BEAUTIFULL TEAM </BR> -</h1>
   <p class="tekst">We are a small teasm of designers, who help brands with big ideas.</p>
   <div class="center">
      <div class="circle col-lg-3 col-md-3"></div>
      <div class="circle col-lg-3 col-md-3"></div>
      <div class="circle col-lg-3 col-md-3"></div>
      <div class="circle col-lg-3 col-md-3"></div>
</section>

CSS：

* {
  margin:             0;
  padding:            0;
  outline:            0;
  text-decoration:    none;
}

/*Body*/
a:link {
  text-decoration:    none;
  color:              #fff
}
a:visited {
  text-decoration:    none;
  color:              #FFF;
}
/*Sections general*/
section {
  width:              100%;
  height:             100vh;
  font-family:       'Titillium Web', sans-serif;
  font-weight:        400;
  margin-bottom:      0;
}

它出了什么问题？

Answer 1

可能是你在内联块元素之间的空间。

这可以使用多种技术修复，但我最常使用的技术是将元素的 font-size设置为零。 e.g。

section {
    font-size: 0;
}

请记住，您需要明确设置所有子元素的字体大小。

section a {
    font-size: 16px;
}

另一个更清洁的解决方案是缩小HTML 。 Chris Coyier详细解释了这个问题here。

Answer 2

您可以在蓝框内的标记中添加style="margin-bottom:0px;"。或者您可以将它添加到相同标记ID下的css文件中。