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.

Dhaval Marthak · Answer 1 · 2013-12-30T16:13:59.707

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:

score 3 · Accepted Answer · answered Dec 30 '13 at 16:20

3

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/

answered Dec 30 '13 at 16:20

DaniP

37,813
8
65
74

Even though every answer fixes the problem this one suits me best. I still need the display:inline-block because I need several div lining up next to each other. This wasn't described in my question unfortunately. Can probably be solved by floating them side by side but this option with vertical-align actually solves it. – John Jan 02 '14 at 06:44

score 1 · Answer 3 · answered Dec 30 '13 at 16:07

1

remove the display-inline style of the div

fiddle

answered Dec 30 '13 at 16:07

semirturgay

4,151
3
30
50

score 0 · Answer 4 · answered Apr 03 '18 at 13:40

0

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}`

answered Apr 03 '18 at 13:40

rosell.dk

2,228
25
15

White margin/padding at the bottom of table cell

4 Answers4