White margin/padding at the bottom of table cell

Question

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.

Answer 1

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/

Answer 2

It's because display:inline-block leaves white-space arround the divs, you should get rid of that property, Removing display property from div will set the output exact you wanted.

Fiddle Demo

Though inline-block is still incredibly useful, but it is important that developers know how to deal with the space that comes with using it.

Side Note: When items are displayed as inline-block any carriage returns or tabs in the markup are recognized as a white-space character. That being the case, you can fix this problem by writing your markup with no space between the items:

Answer 3

remove the display-inline style of the div

fiddle

Answer 4

Although it is not the problem you struggle with, here is a fix to a similar problem:

You also get white gab in bottom of table cells in IE11, when you set td > div {height: 100%; min-height: 240px}. Instead you must settd > div {height: 240px}`