Question

这个问题非常简单。看看照片。我上面的页脚和div之间的空间是什么。 div和footer必须齐平。我尝试了所有可行的解决方案，而且我认为我需要更有效的人帮助。

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

HTML和CSS

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

Answer 1

这是由您标题中的h3页边距引起的。使用下一个代码段删除该空格。

header h3 {margin-top: 0px;}

希望这会有所帮助：）

Answer 2

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

检查出来：https://jsfiddle.net/vuyyxa04/

并在您查看collapsing margins时查看。

Answer 3

如何添加margin-top：-23px到类卡？或者您也可以添加margin-bottom：-23到img

  .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＆＃34; card＆＃34;内部div＆＃34;图像img6＆＃34;

如何删除垂直堆叠的两个div之间的空格？

3 个答案: