How to remove inexplicable padding in table cell caused by padding in child div?

Check out this fiddle to see a demo of the problem: http://jsfiddle.net/rV6Jg/ All padding on table cells is removed, and `border-collapse` is set to `collapse` on the `<table>` element. The bottom row contains a single cell, which in turn contains a `<div>` that has padding set. This padding somehow causes padding not only on the `<div>` but it's parent cell. When I remove the padding on the child `<div>`, the padding on the parent cell disappears. Here's the source code for reference HTML: ``` <div class='wrapper'> <table class='table' border=1> <tr> <td> Toolbar stuff goes here... </td> </tr> <tr> <td> <div class='boxWrapper'> <div class='box'>Content stuff goes here...</div> </div> </td> </tr> </table> </div> ``` CSS: ``` html,body{padding:0px;margin:0px;height:100%;} .wrapper{ padding:1em; height:100%; box-sizing:border-box; } .table{ border-collapse:collapse; width:100%; height:100%; box-sizing:border-box; } .table td{ padding:0px !important; } .table tr:last-child{ height:100%; } .boxWrapper{ padding:1em; height:100%; box-sizing:border-box; } .box{ box-shadow:inset 0px 0px 5px #ccc; padding:1em; height:100%; } ``` UPDATE It seems I did not make it clear that I want padding on the `<div>`s inside the , but not on the `<td>` itself, which as you can see from the following screenshot, does indeed have padding (in green): UPDATE 2 Setting `box-sizing:border-box` on `.box` doesn't solve the problem as suggested in this fiddle