How to remove free spaces between divs

Question

I have four divs, one under other, and I do not want the spaces between them. I tried to write some margins and paddings and nothing works. There are no borders so I don't know what makes the gaps between divs.

.logo {
  background-color: blue;
  height: 125px;
  margin-right: 25%;
  margin-left: 25%;
}

.nav {
  margin-right: 25%;
  margin-left: 25%;
}

.picture {
  margin-right: 25%;
  margin-left: 25%;
  background: yellow;
  height: 300px;
}

.aboutus {
  margin-right: 25%;
  margin-left: 25%;
  background: blue;
  height: 200px;
}

<body>

  <div class="logo">

    <p>logo</p>

  </div>


  <div class="nav">
    <ul>
      <li class="main"><a href="main.html">Domov</a></li>
      <li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
      <li class="contacts"><a href="contacts.html">Kontakt</a></li>
    </ul>
  </div>


  <div class="picture">

    <h1>picture</h1>

  </div>


  <div class="aboutus">

    <h1>about us</h1>

  </div>



</body>

Matt · Accepted Answer · 2018-06-12T13:25:17.677

3

On first glance, the h1 tags are adding space so try this:

h1 {
    margin: 0;
}

You can also set the divs to overflow: auto; which is prefered if you want to keep your spacing above the h1 tags

.nav, .picture, .aboutus {
    overflow:auto;
}

Read more about collapsing margins here: Collapsing margins

edited Jun 12 '18 at 13:25

answered Jun 12 '18 at 13:19

Matt

1,518
4
16
30

score -1 · Answer 2 · edited Jun 13 '18 at 01:08

-1

The space is caused by h1's margin. The following line of code will fix it.

  h1
  {
    margin-top:0;
  }

https://jsfiddle.net/kwb0ygmd/

edited Jun 13 '18 at 01:08

Pang

9,564
146
81
122

answered Jun 12 '18 at 13:19

Sara Kat

378
2
19

score -2 · Answer 3 · answered Jun 12 '18 at 13:20

you need to remove default margin from h1 and ul tags

h1, ul{
   margin: 0;
}

or you can use reset like https://meyerweb.com/eric/tools/css/reset/

.logo {
  background-color: blue;
  height: 125px;
  margin-right: 25%;
  margin-left: 25%;
}

.nav {
  margin-right: 25%;
  margin-left: 25%;
}

.picture {
  margin-right: 25%;
  margin-left: 25%;
  background: yellow;
  height: 300px;
}

.aboutus {
  margin-right: 25%;
  margin-left: 25%;
  background: blue;
  height: 200px;
}
h1, ul{
   margin: 0;
}

<body>

  <div class="logo">

    <p>logo</p>

  </div>


  <div class="nav">
    <ul>
      <li class="main"><a href="main.html">Domov</a></li>
      <li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
      <li class="contacts"><a href="contacts.html">Kontakt</a></li>
    </ul>
  </div>


  <div class="picture">

    <h1>picture</h1>

  </div>


  <div class="aboutus">

    <h1>about us</h1>

  </div>



</body>

How to remove free spaces between divs

3 Answers3