Amit Saxena Amit Saxena - 3 months ago 14
CSS Question

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>




Answer

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>

Comments