css - &gt; <table> - &gt;当表数据包含多个元素时删除垂直空间

Question

我有一个table data字段，顶部有一个蓝色方块，底部有一个图标。

看到这个JsFiddle 。

td字段的height为26px因为blue_line div元素和user_icon图像之间有一个小的垂直空间：

我希望删除此垂直空间，新高度为20px

我能够通过添加position: absolute;来做到这一点position: absolute; ：

但在我的应用程序中，我使用jquery.ui.resizable ，如果我添加position: absolute; 到.blue_line div元素。

我的问题是，是否有其他方法可以删除垂直空间？

Answer 1

您可以将td元素的显示更改为grid

<td style="display: grid;">
    <div class="blue_line"></div>
    <img class="user_icon" src="http://findicons.com/files/icons/1008/quiet/128/opera.png"/>
</td>

不幸的是， Internet Explorer中不存在此属性。 如果你想支持IE你将不得不添加更多的样式，并将td元素的显示更改为block ，并将子项更改为flex

<td style="display: block;">
    <div class="blue_line" style="display: flex;"></div>
    <img class="user_icon" style="display: flex;" src="http://findicons.com/files/icons/1008/quiet/128/opera.png"/>
</td>

Answer 2

我认为你可以使用background-image属性并设置background-position