I think this example speaks for itself: http://jsfiddle.net/FLRka/1/
The expected result for me is that the blue box should be docked with the top of the page, why is it getting a padding as well?
It’s not getting 100px padding though, it’s less than that.
Here is the HTML from the example:
<!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>
The default
vertical-alignfor table cells ismiddle.If you add this, you’ll get your expected result:
http://jsfiddle.net/FLRka/3/