How to remove this space between those sections?

Question

So far as I know I haven't done anything wrong yet. I am working on a school project to make a .PSD template exactly the same in HTML/CSS/JS. I have added my 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;
}

What is wrong with it?

You left out an opening section tag. And "beautifull" only has one "l" — j08691, Feb 12 '16 at 14:37
Looks like margin collapse from the heading. please include a [mcve]. — zzzzBov, Feb 12 '16 at 14:38
@Adjit they are all closed, I have on accident removed the closing tag in the Stackoverflow editor. I'll change that. — Roy van Eerden, Feb 12 '16 at 14:45
@j08691 This is just a snap of my code, this is all you need because it is between all the sections. — Roy van Eerden, Feb 12 '16 at 14:45
@RoyvanEerden, "this is all you need because it is between all the sections" no it's not all we need because you haven't shown the styles that are on elements at the edges of the sections. [Consider this example](https://jsfiddle.net/ee855bry/), there isn't any margin on the `.container`, but there's a gap because the `p` and `h1` elements have margins and those margins are collapsing. — zzzzBov, Feb 12 '16 at 14:47
Also if we can't see accurate HTML code we cannot properly diagnose the issue. You should fix your formatting — Adjit, Feb 12 '16 at 14:48
No, it's not all I need since I can't reproduce what you showed in your image withthe code you posted. — j08691, Feb 12 '16 at 14:48

score -1 · Answer 1 · answered Feb 12 '16 at 14:39

It could be that you are fighting the space between inline block elements.

This can be fixed using multiple techniques but the one I end up using most often is by setting the elements's font-size to zero. e.g.

section {
    font-size: 0;
}

Just remember that you need to explicitly set the font-size of all the child elements.

section a {
    font-size: 16px;
}

Another much cleaner solution would be to minify your HTML. Chris Coyier explains this issue in detail here.

score -2 · Answer 2 · answered Feb 12 '16 at 14:29

-2

you could add a style="margin-bottom:0px;" to the tag that is inside the blue box. Or you could add it to the css file under the same tag id.

answered Feb 12 '16 at 14:29

tecksup

51
1
13

This answer is just plain wrong – StudioTime Feb 12 '16 at 14:30
you could also try setting the height to a set size. – tecksup Feb 12 '16 at 14:31

How to remove this space between those sections?

2 Answers2