HTML table display padding issue

Found a very interesting padding behavior in webview (webkit)

the parent container has this style

    padding: 5px 0 5px 40px;
     width: 100%;
     display: table;

The child style has this style:

     display: table-cell;
     padding-left: 55px;
     vertical-align: middle;

The developer used table-cell style to make the text vertical center aligned. The problem is that the 40px padding on the parent container doesn't reduce the child's width. The child was push out to the right of the container.  Remove the table-cell style will fix this issue, but you lose the vertical center alignment.

To fix this, move the 40px padding to the child, the new style become

    padding: 5px 0;
     width: 100%;
     display: table;

     display: table-cell;
     padding-left: 95px;
     vertical-align: middle;

Why you set padding in two places when you can use one.

BTW, margin doesn't work along with table-cell

--
Feng