Geek Answers Handbook

Strange with tables and pads

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 does it get an addition?
It does not get 100px padding, although less than that.

Here is the HTML example 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>
+4
source share
3 answers

The default is vertical-align for middle table cells.

If you add this, you will get the expected result:

 td { vertical-align: top }

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

+3
source

This is due to the height of the table row becoming 200px; (100 padding + 100 px div) and td have average vertical alignment by default. This way you get 50px above and below 100 pixels div.

there is a fix here:

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

+3
source

Since the material in the table cell is vertically aligned in the middle (/ center).

-1
source

More articles:


All Articles