Непонятные отступы в таблице

@outoftime · Регистрация: 25.07.2009

Author24 — интернет-сервис помощи студентам

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body style="width: 600px; margin: 0px; padding: 0px;">
        <table cellpadding="0" cellspacing="0" border="0" width="600">
            <tr>
                <td id="header">
                    <table cellpadding="0" cellspacing="0" border="0" width="600">
                        <tr style="height: 30px; background-color: #231f20; width: 600px;">
                            <td colspan="9">&nbsp;</td>
                        </tr>
                        <tr style="height: 39px; background-color: #231f20; width: 600px;">
                            <td style="width: 46px;">&nbsp;</td>
                            <td style="width: 116px;">
                                <a href="#" target="_blank" style="width: 116px; height: 39px; display: block;
                                   background: url(logo.png) no-repeat;" title="Home page">
                                </a>
                            </td>
                            <td style="width: 299px;">&nbsp;</td>
                            <td style="width: 22px;"></td>
                            <td style="width: 11px;">&nbsp;</td>
                            <td style="width: 10px;"></td>
                            <td style="width: 14px;">&nbsp;</td>
                            <td style="width: 21px;"></td>
                            <td style="width: 61px;">&nbsp;</td>
                        </tr>
                        <tr style="width: 600px;height: 12px;background-color: #231f20;">
                            <td style="width: 46px;height: 12px;background: url(main_article.png) no-repeat;">&nbsp;</td>
                            <td style="width: 116px;height: 12px;background: url(main_article.png) no-repeat;
                                background-position-x: -46px; border-collapse: collapse;" colspan="8">
                                <a href="#" target="_blank" style="width: 116px; height: 12px; display: block;
                                   background: url(logo.png) no-repeat;background-position-y: -39px;">
                                </a>
                            </td>
                        </tr>
                        <tr style="width: 600px;height: 244px;background-color: #231f20;">
                            <td style="width: 46px;background: url(main_article.png) no-repeat;background-position-y: -12px;">&nbsp;</td>
                            <td style="width: 116px;background: url(main_article.png) no-repeat;background-position-x: -46px;
                                background-position-y: -12px;" colspan="8">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</body>
</html>

Ячейка логотипа имеет дополнительные отступы из-за чего его высота на 8 больше ожидаемого. Можете подсказать откуда ноги растут? В приложениях используемая графика, что-бы было понятней что к чему.

@outoftime · 12.12.2013, 23:19 **[ТС]**

Если что-то непонятно или в неудобной форме, прошу высказываться, так как сам найти не могу уже довольно долгий промежуток времени.

@Academik · 13.12.2013, 00:19

HTML5

<td style="width: 116px;">
    <a href="#" target="_blank" style="width: 116px; height: 39px; display: block; background: url(logo.png) no-repeat;" title="Home page">
     </a>
</td>

outoftime, Эта ячейка? И как вы поняли что она на 8px выше чем должна быть?

@outoftime · 13.12.2013, 00:43 **[ТС]**

Строка 38:

HTML5

                            <td style="width: 116px;height: 12px;background: url(main_article.png) no-repeat;
                                background-position-x: -46px; border-collapse: collapse;" colspan="8">
                                <a href="#" target="_blank" style="width: 116px; height: 12px; display: block;
                                   background: url(logo.png) no-repeat;background-position-y: -39px;">
                                </a>
                            </td>

В инспекторе DOM значение высоты строки устанавливается в 20 пикселей, а я задаю 12, вот вам и 8 пикселей разница.

Еще заметил что значение border-spacing переопределяется значением из user agent stylesheet и устанавливается равным 2ум пикселям. Также сама ячейка имеет внутренний отступ хотя padding=0.

В приложениях часть страницы с картинками, что-бы было наглядно понятно где проблема.

@outoftime · 13.12.2013, 00:54 **[ТС]**

Еще добавил скрин, на котором показано что каким-то образом значение border-spacing существует в двух экземплярах (оно не может быть одновременно быть равным двум значениям)

Также странно что не смотря на то что значение height в element.style равно 12, высота контента блока равна 20 (внизу есть представление границ блока, и там высота контента равна 20. wtf?)

@Academik · 13.12.2013, 01:05

Не могу понять в чём косяк, но если пробел убрать, то ячейки принимают указанную высоту в 12px

HTML5

1	<td style="width: 46px; height: 12px; background: url(main_article.png) no-repeat;"> </td>

@outoftime · 13.12.2013, 01:09 **[ТС]**

Спасибо. Дело в высоте символов, так как высота строки равна высоте самой высокой ячейки. Не заметил, спасибо большое.

Только мне пробельный символ надо, код будет таким:

HTML5

1	<td style="width: 46px; height: 12px; background: url(main_article.png) no-repeat; font-size: 0px;"> </td>

@Academik · 13.12.2013, 02:18

Может поможет, проверьте:

CSS

1	line-height: 1px;

Добавлено через 37 минут
outoftime, помогло?

@outoftime · 13.12.2013, 05:00 **[ТС]**

Да. Помогают любые манипуляции с высотой строки.

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	12.12.2013, 23:19 [ТС]	2
	Если что-то непонятно или в неудобной форме, прошу высказываться, так как сам найти не могу уже довольно долгий промежуток времени. 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	13.12.2013, 00:54 [ТС]	5
	Еще добавил скрин, на котором показано что каким-то образом значение border-spacing существует в двух экземплярах (оно не может быть одновременно быть равным двум значениям) Также странно что не смотря на то что значение height в element.style равно 12, высота контента блока равна 20 (внизу есть представление границ блока, и там высота контента равна 20. wtf?) Миниатюры 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	13.12.2013, 05:00 [ТС]	9
	Да. Помогают любые манипуляции с высотой строки. 0