css - Why is my html table taking up more height than necessary? -


i have table bunch of same image in single row. image has height of 21px cells of table have rendered height of 25px (in chrome, safari, , firefox).

there's nothing else in table, , can tell, there no margins, borders, or padding. why table taller needs be?

here's example:

http://jsfiddle.net/q6zy17dz/

and here's simple example of table:

<table>     <tbody>         <tr>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>             <td class="datetime"></td>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>             <td><img src="http://i.imgur.com/b2f5t2b.png"></td>         </tr>     </tbody> </table> 

thanks!

bonus question: there way recreate layout without using table (and without using floats)? again!

by default, image within table gets computed display:table-cell property.

you should set img { display: block; }


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -