删除两个部分之间的空白区域

时间：2016-08-31 16:26:02

标签： html css html5 whitespace sections

enter image description here

我有两个部分：

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

他们之间有一个空白区域。虽然我的其他部分情况并非如此。

我没有为这些部分设置任何显示属性，但是它从css文件继承了block的display属性。 （在Chrome中的开发者工具检查时）

我还检查了两个部分的内容，如果由于某种原因出现这些部分的任何内容。情况似乎并非如此。

导致此空白区域的原因是什么？如何删除它？

PS：如果我应该添加更多信息，请告诉我。

PS2：我在本网站上查看的帖子谈到从inline-block元素中删除空格。

更新

以下是相关部分的Fiddle：

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：1)

You need to add margin:0; to h2

.upper {margin:0;}

答案 2 :(得分：1)

This is the so called collapsed margins

you need to reset the default margin from child h2

Note:

careful img is a self closing tag

/* 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>

答案 3 :(得分：1)

Use this: I tested it with the fiddle and it worked.

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

or you can use this with divs:

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

By putting the divs inline, it removes the space in between elements, because if there is space in between it becomes space in the layout.

答案 4 :(得分：1)

That's the margin of you <h2> in the second <section> that's making the gap between your sections.

You may correct it by adding a class to that <h2> and set margin-top: 0; like this:

html:

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

css:

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

答案 5 :(得分：0)

如果遇到这些问题，找到解决方案的最佳方法是Inspect Element。在这里，当您执行此操作时，您将看到有默认边距。因此，要摆脱这种情况，请转到您的CSS文件并设置空白：0;这应该有帮助。

相关问题
最新问题