Html 桌子和垫子的怪异_Html_Css_Html Table_Padding

Html 桌子和垫子的怪异

html css

Html 桌子和垫子的怪异,html,css,html-table,padding,Html,Css,Html Table,Padding,我认为这个例子不言自明：对我来说，预期的结果是蓝色框应该与页面顶部对接，为什么它也会有填充？但它并没有得到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/

我认为这个例子不言自明：

对我来说，预期的结果是蓝色框应该与页面顶部对接，为什么它也会有填充？
但它并没有得到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>

这是因为表格行的高度变为200px；（100 padding+100 px div）和td在默认情况下具有中间垂直对齐，因此在100像素div上下各有50 px

以下是修复方法：

表格单元格的默认

垂直对齐

为

中间

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

td {
    vertical-align: top
}

< P>因为表细胞中的物质垂直排列在中间（/中心）。