CSS中的卡片間距

Question

更新：謝謝大家的建議。我沒有意識到這很簡單。

我目前正在研究CSS中的'卡片'，並且似乎無法擺脫卡片行1和卡片行2之間的小空白區域。有關如何刪除它的任何建議。沒有它，動畫看起來會更順暢。

/* cards */ 
 
.dank.cards { margin:0; padding:0; list-style-type:none; } 
 
.dank.cards li { width:50%; float:left; overflow:hidden; position:relative; } 
 
.dank.cards li:hover img { transform:scale(1.1); } 
 
.dank.cards li img { max-width:100%; -webkit-transition: transform 1s; transition: transform 1s; } 
 
.dank.cards .dank.content { position:absolute; top:0; left:0; }

<ul class="dank cards slideRight"> 
 
    <li><img src="http://neil.computer/s/1.jpg" /><div class="dank content">Cool</div></li> 
 
    <li><img src="http://neil.computer/s/1.jpg" /><div class="dank content">Amazing</div></li> 
 
    <li><img src="http://neil.computer/s/1.jpg" /><div class="dank content">Sweet</div></li> 
 
    <li><img src="http://neil.computer/s/1.jpg" /><div class="dank content">Wow</div></li> 
 
</ul>

Answer 1

圖像是默認的內聯元素。 因此，將樣式display:block;設置爲圖像元素將解決您的問題。

只需設置

<img src="http://neil.computer/s/1.jpg" style="display:block;"/> 

希望它能幫助。

Answer 2

使用display:block;在IMG的風格。

.dank.cards li img { 
    display:block 
} 

Answer 3

這很容易擺脫這個問題，只需添加display:block;到圖像

.dank.cards li img{ 
    display:block; 
}