Странность со столами и прокладками - PullRequest
Новая
       23

Странность со столами и прокладками

4 голосов
/ 18 июля 2011

Я думаю, этот пример говорит сам за себя: http://jsfiddle.net/FLRka/1/

Ожидаемый результат для меня - то, что синее поле должно быть пристыковано к верхней части страницы, почему оно также получает отступ?
Хотя он не получает отступ 100px, он меньше этого.

Вот HTML-код из примера: 

<!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>
    </head>

    <body style="margin:0px">
        <table style="width:100%; height:100%; border-spacing:0px;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:50%">
                    <div style="height:100px; background-color:red; padding-top:100px;"></div>
                </td>
                <td style="width:50%">
                    <div style="height:100px; background-color:blue;"></div>
                </td>
            </tr>
        </table>
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 18 июля 2011

По умолчанию vertical-align для ячеек таблицы: middle.

Если вы добавите это, вы получите ожидаемый результат: 

td {
    vertical-align: top
}

http://jsfiddle.net/FLRka/3/

3 голосов
/ 18 июля 2011

Это из-за высоты строки таблицы становится 200px; (100 отступов + 100 пикс. Деления) и td по умолчанию имеют среднее вертикальное выравнивание. Таким образом, вы получаете 50px выше и ниже 100-пиксельного div.

вот исправление:

http://jsfiddle.net/Paulpro/FLRka/2/

0 голосов
/ 18 июля 2011

Поскольку содержимое вертикальной ячейки таблицы выравнивается по центру (/ центр).

...