How can I remove the space between two divs that are stacked vertically?

Question

This question is pretty simple. Take a look at the photo. I what the space between the footer and the div that is above it to be gone. The div and the footer must be flush. I tried every solution I can and I think I need help from someone more expierienced.

Below is the html and css code for what I am trying to do. See link for illustration

HTML and CSS

    .content{
     margin:0;
     width: 100%;
     /*padding-top:30px;*/
     /*padding-left: 3px;*/
     /*padding-right: 0px;*/
     /*padding-bottom: 60px;*/
     font-family: 'Lato', sans-serif;
    }
    
    
    
    #footer{
     height:200px;
     /*width:100%;*/
     background:#1c1c1c;
     text-align: center;
     padding-top:69px;
     padding-bottom: 69px;
    }
    
    
    
    .post_date{
     padding:20px 0;
     border-top: 1px solid #dbdbdb;
     border-bottom: 1px solid #dbdbdb;
     width:100%;
     color:#dbdbdb;
    }
    
    
    .card{
     width:100%;
     height:379.6px;
     /*background: red;*/
     /*padding-left: 2px;*/
    }
    
    
    
    /*Card 6 properties*/
    #c6{
     background: #9b59b6;
    }
    
    #c6 h3{
     color:white;
    }
    .b6,.s6{
     color:white;
    }
    /**********/
    
    img{
     width:100%;
     margin: 0px;
    }

     <section id="section-6" class="grid">
      <div class="images img6">
       <img src="images/pic12.jpg">
      </div>
      <div class="card" id="c6">
       <div class="content">
        <header>
         <h3>Magna porta aliguam</h3>
        </header>
       <p class="post_date"> 3 days ago by <span class="s6">John Doe</span></p>
       <p>
       Nullam posuere erat vel placerat rutrum. Praesent ac consectetur dui, et congue quam. Donec aliquam lacinia condimentum. Integer porta massa sapien, commodo sodales diam suscipit vitae. Aliquam quis felis sed urna semper semper. Phasellus eu scelerisque mi. Vivamus aliquam nisl libero, sit amet scelerisque ligula laoreet vel.
       </p>
      <button class="btn b6"> Read More</button>
       </div>
      </div>
     </section>
    
     <footer id="footer">
    
    <div id="social_media">
     <ul>
      <li><i class="fab fa-twitter"></i></li>
      <li><i class="fab fa-facebook-f"></i></li>
      <li><i class="fab fa-instagram"></i></li>
     </ul>
    </div>
    
     
    
     <div class="copyright">
      @Untitled Design. <a href="#">Templated:</a> Images: <a href="#"> Unsplash</a>
     </div>
    </footer>
    
    
    </main>
    
    
    </body>
    </html>

Have you tried looking into the dev tools on your browser? – Raphael Cunha May 10 '18 at 01:46 — Raphael Cunha, May 10 '18 at 01:46

score 0 · Answer 1 · answered May 10 '18 at 01:51

0

This is cause by the h3 margin in you header. Use the next snippet to remove that space.

header h3 {margin-top: 0px;}

Hope this helps :)

answered May 10 '18 at 01:51

Gerardo BLANCO

5,590
1
16
35

score -1 · Answer 2 · answered May 10 '18 at 02:04

-1

Add overflow:auto to your .content div.

Check this out: https://jsfiddle.net/vuyyxa04/

And check out collapsing margins while you're at it.

answered May 10 '18 at 02:04

Vishnu Kyatannawar

333
2
7

Don't know, why people down vote without justifying what is wrong. You need to understand what are collapsed margin in order to know what is happening instead of simply using any CSS trick to solve the issue. – Vishnu Kyatannawar May 10 '18 at 02:11

beginnerprogrammer · Answer 3 · 2018-05-11T00:28:57.700

How about add margin-top: -23px to class card? Or you can also add margin-bottom : -23 to img

  .card{
    width:100%;
    height:379.6px;
    margin-top: -23px;
   }

Or

.images.img6 {
margin-bottom: -23px;
}

I hope this helps ^^ You can see it here https://jsfiddle.net/ajz9gj5n/

I found another way to solve this https://jsfiddle.net/ajz9gj5n/1/

On the css i put

.images.img6 {
  display: grid;
}

And i change the html from

<section id="section-6" class="grid">
        <div class="images img6">
            <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
        </div>
        <div class="card" id="c6">
            <div class="content">
                <header>
                    <h3>Magna porta aliguam</h3>
                </header>
            <p class="post_date"> 3 days ago by <span class="s6">John Doe</span></p>
            <p>
            Nullam posuere erat vel placerat rutrum. Praesent ac consectetur dui, et congue quam. Donec aliquam lacinia condimentum. Integer porta massa sapien, commodo sodales diam suscipit vitae. Aliquam quis felis sed urna semper semper. Phasellus eu scelerisque mi. Vivamus aliquam nisl libero, sit amet scelerisque ligula laoreet vel.
            </p>
        <button class="btn b6"> Read More</button>
            </div>
        </div>
    </section>

into this

  <section id="section-6" class="grid">
     <div class="images img6">
      <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
      <div class="card" id="c6">
            <div class="content">
                <header>
                    <h3>Magna porta aliguam</h3>
                </header>
            <p class="post_date"> 3 days ago by <span class="s6">John Doe</span></p>
            <p>
            Nullam posuere erat vel placerat rutrum. Praesent ac consectetur dui, et congue quam. Donec aliquam lacinia condimentum. Integer porta massa sapien, commodo sodales diam suscipit vitae. Aliquam quis felis sed urna semper semper. Phasellus eu scelerisque mi. Vivamus aliquam nisl libero, sit amet scelerisque ligula laoreet vel.
            </p>
        <button class="btn b6"> Read More</button>
            </div>
        </div>
        </div>
    </section>

I put div "card" inside div "images img6"

Thanks alot this is the most useful answer that I have been given ! — K.Woods, May 10 '18 at 03:26
@K.Woods can you accept it as an aswer or maybe upvote this? ^^ — beginnerprogrammer, May 10 '18 at 06:51

How can I remove the space between two divs that are stacked vertically?

3 Answers3