CSS中的卡片間距

-3

更新：謝謝大家的建議。我沒有意識到這很簡單。CSS中的卡片間距

我目前正在研究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>

來源

2017-04-18 Neil

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

只需設置

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

希望它能幫助。

來源

2017-04-18 04:50:59 Chirag

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

.dank.cards li img { 
    display:block 
}

來源

2017-04-18 04:50:27

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

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

來源

2017-04-18 04:51:08 Rando

CSS中的卡片間距

回答

相關問題