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