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中的卡片间距

回答

相关问题