CODEWITHSUNDEEP
csshtmlwhitespacesections
Amit Saxena
Amit Saxena

Reputation: 216

Removing white space between two sections

enter image description here

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>

Upvotes: 3

Views: 8703

Answers (6)

Kiran
Kiran

Reputation: 373

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.

Upvotes: 0

divya
divya

Reputation: 304

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

Upvotes: 1

William
William

Reputation: 1030

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

Upvotes: 3

BigMonkey89WithaLeg
BigMonkey89WithaLeg

Reputation: 315

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.

Upvotes: 1

dippas
dippas

Reputation: 60553

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>

Upvotes: 1

Mourad Karoudi
Mourad Karoudi

Reputation: 378

You need to add margin:0; to h2

.upper {margin:0;}

Upvotes: 1

Related Questions