Как я могу предотвратить слишком высокое значение <td>?

Question

Должно быть, это что-то глупое, но я пока не могу понять ...

Вот мой HTML:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td>
</tr>
<tr>
    <td class="NoteCell"></td>
    <td class="NoteCell">{{ text }}</td>
    <td class="NoteCell"></td>
</tr>
<tr>
    <td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td>
</tr>

Я ожидаю, что первая и третья строки будут иметь высоту 8 пикселей, но по какой-то причине они намного выше (как будто внутри был текст, но нет текста!)

озадачен ... Любая помощь будет оценена!

Answer 1

Попробуйте td img { display: block; }

Answer 2

У меня была похожая проблема, и vertical-align:top; помог мне.

Answer 3

Совет 1. Вставьте свой фрагмент кода на пустую HTML-страницу и выясните, не возникает ли проблема, убедитесь, что тип документа совпадает с целевым.

Совет 2. Используйте расширение браузерас помощью средств отладки CSS проверьте и используйте css, применяемый к строкам, ячейкам и изображениям в ячейках таблицы.

Совет 3. Вы можете попробовать одну из них, добавив их все:

table {border-collapse:collapse;table-layout:fixed}
td,tr {padding:0}
td img {margin:0;height:8px}

Если это помогает, это означает, что другие определения в вашей таблице стилей делают ячейки или строки выше.Удаляя мои предложения CSS один за другим, вы можете узнать, что их вызывает.

Answer 4

Причина, по которой вторые столбцы 1-го и 3-го ряда определяют минимальную высоту.

Обратите внимание, что все столбцы в строке будут иметь одинаковую высоту, а все строки в столбце будут иметь одинаковую ширину.

Вот как отображаются таблицы.

Итак, вам придется дополнительно написать:

td { font-size: 8px; }

РЕДАКТИРОВАТЬ: исправлено fontsize до font-size