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

0

Посмотрите на этот 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 заполнил всю ячейку таблицы.

Теги:
css-tables
padding
cellpadding

4 ответа

2
Лучший ответ

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

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

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

Поделиться
  • 0
    Хотя каждый ответ решает проблему, этот подходит мне больше всего. Мне все еще нужен дисплей: inline-block, потому что мне нужно, чтобы несколько div располагались рядом друг с другом. Это не было описано в моем вопросе, к сожалению. Возможно, это можно решить, поместив их рядом, но эта опция с вертикальным выравниванием фактически решает эту проблему.
3

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

Демо-версия скрипта

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

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

Поделиться
1

удалить стиль display-inline в div

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

Поделиться
0

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню