css --> <table> --> remove vertical space when table data contains several elements

Question

I have a table data field that contains a blue square on the top and an icon on the bottom.

See this JsFiddle .

The height of the td field is 26px because there is a small vertical space between the blue_line div element and the user_icon image:

I want that this vertical space is removed and the new height is 20px

I was able to do that by adding position: absolute; :

But in my application I use jquery.ui.resizable which gives me problems if I add position: absolute; to the .blue_line div element.

My Question is if there are other ways to remove the vertical space ?

Answer 1

You can change the display of the td Element to 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>

Unfortunately this property does not exist in Internet Explorer . If you want to support IE you'll have to add some more styling and change the display of the td Element to block and the children's to 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