Белое поле / отступы внизу ячейки таблицы

Question

Посмотрите на эту 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;
}

Почему это белое поле / отступ в нижней части ячейки таблицы? Как я могу избавиться от этого? Цель здесь - получить оранжевый цвет фона div, чтобы заполнить всю ячейку таблицы.

Answer 1

Чтобы выйти из этого пространства, вы можете изменить vertical-align вашей <div> что по умолчанию является baseline`

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

Демо-версия http://jsfiddle.net/nMbb4/6/

Answer 2

Это потому что display:inline-block оставляя пустое пространство вокруг div, вы должны избавиться от этого свойства, display собственность от div установит вывод точно, что вы хотели.

Скрипка Демо

Хоть inline-block все еще невероятно полезен, но важно, чтобы разработчики знали, как обращаться с пространством, которое идет с его использованием.

Примечание: когда элементы отображаются как inline-block любые возвраты каретки или вкладки в разметке распознаются как пробельные символы. В таком случае вы можете решить эту проблему, написав свою разметку без пробелов между элементами:

Answer 3

Удалить display-inline стиль div

играть на скрипке

Answer 4

Хотя это не проблема, с которой вы боретесь, вот решение этой проблемы:

Вы также получите белый пробел в нижней части ячеек таблицы в IE11, когда вы установите td > div {height: 100%; min-height: 240px}. Instead you must settd > div {height: 240px}`