Removing white space between two sections

Question

I have two sections as such:

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

There is a white space coming in between them. While this is not so for the rest of my sections.

I have not set any display property for the sections, but it is inheriting the display property of block from a css file. (on checking from developer tool in Chrome)

I also checked the contents of both the sections if anything is coming out the sections for some reason. This does not seem to be the case.

What is causing this white space and how can I remove it?

PS: Let me know if I should add more information.

PS2: The posts I have checked out on this site talk about removing whitespace from inline-block elements.

Update

Here is the Fiddle of the relevant part:

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

Сan you make fiddle? Without your styles it`s difficult to solve problem — Friend, Aug 31 '16 at 16:27
Hard to know what the issue is when you don't show most of the css... But I'm assuming it's a margin or padding issue. — Ol' Reliable, Aug 31 '16 at 16:27
Remember that you are required to post the code that shows the problem here. A fiddle is OK as long as a minimal example is here, too. — Rob, Aug 31 '16 at 16:38
http://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element This might help. Without the code it is impossible identify your problem — ONE_FE, Aug 31 '16 at 16:45
I suspect that you are seeing the effect of collapsing margins. You probably have a margin set on the element for the "Our Services" header and that is opening up some whitespace between the two `section` elements. — Marc Audet, Aug 31 '16 at 16:58

score 3 · Answer 1 · answered Aug 31 '16 at 17:54

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

score 1 · Answer 2 · edited Sep 01 '16 at 12:26

1

You can try using margin-(right/left/bottom/top):0px

edited Sep 01 '16 at 12:26

dippas

58,591
15
114
126

answered Aug 31 '16 at 16:35

divya

196
11

score 1 · Answer 3 · answered Aug 31 '16 at 17:35

1

You need to add margin:0; to h2

.upper {margin:0;}

answered Aug 31 '16 at 17:35

Mourad Karoudi

348
3
13

score 1 · Accepted Answer · answered Aug 31 '16 at 17:40

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>

Thanks a lot for the detailed answer! I was not aware that margins can be inherited too in such a fashion. Looks like I have a lot to learn. — Amit Saxena, Aug 31 '16 at 18:00

BigMonkey89WithaLeg · Answer 5 · 2016-08-31T17:49:18.807

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.

score 0 · Answer 6 · answered Dec 21 '19 at 08:19

If you ever come across these problems, the best way to find the solution is by Inspect Element. Here when you do this you will be able to see there is a default margin. So for getting rid of this, go to your CSS file and make the margin: 0; This should help.

Removing white space between two sections

6 Answers6