如何删除垂直堆叠的两个 div 之间的空间？ [复制]

Question

这个问题很简单。看看照片。我在页脚和它上面的 div 之间的空间消失了。 div 和页脚必须齐平。我尝试了所有可能的解决方案，但我认为我需要更有经验的人提供帮助。

下面是我想要做的 html 和 css 代码。 See link for illustration

HTML 和 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>


 

Answer 1

这是由标题中的h3 边距引起的。使用下一个 sn-p 删除该空间。

header h3 {margin-top: 0px;}

希望这会有所帮助:)

Answer 2

将overflow:auto 添加到您的.content div。

看看这个：https://jsfiddle.net/vuyyxa04/

并在您使用时查看collapsing margins。

Answer 3

如何将 margin-top: -23px 添加到班级卡片？ 或者你也可以在 img 中添加 margin-bottom : -23

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

或者

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

希望对你有帮助^^ 你可以在这里看到它https://jsfiddle.net/ajz9gj5n/

我找到了解决这个问题的另一种方法 https://jsfiddle.net/ajz9gj5n/1/

在我放置的 css 上

.images.img6 {
  display: grid;
}

我将 html 从

<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>

进入这个

  <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>

我把 div "card" 放在 div "images img6" 里面