Question

我认为这个例子不言自明：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>

Answer 1

这是因为表行的高度变为200px; （100填充+ 100 px div）和默认情况下td具有中间垂直对齐所以你得到100像素div上下50px。

这是修复：

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

Answer 2

表格单元格的默认vertical-align为middle。

如果添加此项，您将获得预期结果：

td {
    vertical-align: top
}

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

Answer 3

因为表格单元格中的内容在中间（/ center）对齐。

桌子和填充物的怪异

3 个答案: