Table inside inline block breaks vertical alignment

Question

I meet this problem from project to project, but still don't understand why it arises.

Usually I need a header like:

<header><table><td valign="top">1st block</td><td valign="top">2nd block</td></table></header>

Information in 2nd block should be placed on the right edge, so I set text-align:right to <td>, and create an inline-block div inside it. All text, divs and other elements inside said div located correctly, but if I create a table and put them therein, said inline-block div gets 2-4 pixels higher than it should be. http://jsfiddle.net/njaqb2eu/4/

How to fix it?

Answer 1

I think you need to reset some elements. The browser defaults are causing you some trouble:

td, tr, table, th{
    padding: 0;
    border-spacing:0;
}
.full_width{width:100%}
.full_height{height:100%}

.header{width:98%;height:60px;border:2px solid #eee}
.header-center{width:70%;height:100%;margin:0 auto}

.header-part_1{width:30%;    display: table-cell;
  vertical-align: middle;
}
.header-part_2{width:70%;  display: table-cell;
  vertical-align: middle;}

.header-text{border:1px solid black}
.inline-block{border:1px solid red}