[SOLVED] White margin/padding at the bottom of table cell

White margin/padding at the bottom of table cell

Look at this JSFiddle: http://jsfiddle.net/nMbb4/1/

HTML:

<table>
    <tr>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

CSS:

table, tr, td
{
    padding:0px;
    margin:0px;
    border:solid 1px black;
    font-size:10px;
}
table
{
    border-collapse:collapse;
}

td
{
    width:15px;
}

div
{
    width:15px;
    height:15px;
    display:inline-block;
    background-color:orange;
}

Why is it a white margin/padding at the bottom of the table cell? How can I get rid of it? The goal here is to have the orange background color of the div to fill the whole table cell.

Solution

To get off that space you can change the vertical-align of your <div> that for default is baseline`

div {
 display:inline-block;
 vertical-align:top; /*or middle or bottom*/
}

The demo http://jsfiddle.net/nMbb4/6/