title: How to remove free spaces between divs
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;div class="logo"&gt;
  
      &lt;p&gt;logo&lt;/p&gt;
  
    &lt;/div&gt;
  
  
    &lt;div class="nav"&gt;
      &lt;ul&gt;
        &lt;li class="main"&gt;&lt;a href="main.html"&gt;Domov&lt;/a&gt;&lt;/li&gt;
        &lt;li class="gallery"&gt;&lt;a class="active" href="gallery.html"&gt;Galéria&lt;/a&gt;&lt;/li&gt;
        &lt;li class="contacts"&gt;&lt;a href="contacts.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  
    &lt;div class="picture"&gt;
  
      &lt;h1&gt;picture&lt;/h1&gt;
  
    &lt;/div&gt;
  
  
    &lt;div class="aboutus"&gt;
  
      &lt;h1&gt;about us&lt;/h1&gt;
  
    &lt;/div&gt;
  
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>