桌子和填充物的奇怪之处答案

【问题标题】：Weirdness with tables and paddings桌子和填充物的奇怪之处
【发布时间】：2011-10-07 07:25:22
【问题描述】：

我认为这个例子不言自明：http://jsfiddle.net/FLRka/1/

对我来说，预期的结果是蓝色框应该停靠在页面顶部，为什么它也有填充？
虽然它没有得到 100 像素的填充，但它比那个少。

这是示例中的 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>

【问题讨论】：

标签： html css html-table padding

【解决方案1】：

因为表格单元格中的东西垂直对齐在中间（/中心）。

【讨论】：

【解决方案2】：

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

如果你添加这个，你会得到你预期的结果：

td {
    vertical-align: top
}

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

【讨论】：

【解决方案3】：

这是因为表格行的高度变成了200px； (100 padding + 100 px div) 和 td 默认情况下有中间垂直对齐所以你在 100 像素 div 的上方和下方得到 50px。

这里是修复：

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

【讨论】：