[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか？

質問

以下のCSSをご確認ください。

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

div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}


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

ブラウザでの表示結果です。

必要なもの

解決方法は？

これは、実はHTMLで期待されている動作なのです。inline-block を使用しているため、要素の後と他のインライン要素の前にある改行文字や空白は、スペースとしてカウントされます。もし、写真のようにブロックを横に並べたい場合は、次のようなHTMLにする必要があります。

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

動作デモ

あまりきれいではありませんが、別の方法を使うことをお勧めします。もしかしたら、代わりに要素をフローティングにするかもしれません。

なぜこのような現象が起こるのか、より詳しい説明はこちらを参照してください。

inline-block要素間のスペースを取り除くには？