Why “Inline-block” doesn't work properly in this CSS?

Question

Please check the CSS below.

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.e         


        

Answer 1

My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.

.rex{
display:block;
font-size:0;
}

.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}

.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}