表示の面白い問題：インラインブロックのプロパティ

Question

CSSのdisplay: inline-block;プロパティを使用して2つのdivを並べて配置しようとしています。しかし、私のdivsは、他の下に配置されます。フィドルの

リンク： - https://jsfiddle.net/04cc1n8j/

HTML

<div class='outerDiv'> 
    <div class='innerDiv1'></div> 
    <div class='innerDiv2'></div> 
</div> 

CSS

.outerDiv{ 
    width:300px; 
    height:200px; 
    margin:0px; 
    padding:0px; 
} 
.innerDiv1{ 
    width:100px; 
    height:200px; 
    display:inline-block; 
    background-color:red; 
    margin:0px; 
    padding:0px; 
} 

.innerDiv2{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    background-color:green; 
    margin:0px; 
    padding:0px; 
} 

Answer 1

inline-block要素間の空白の幅レイアウトを壊しています。 This articleが役立ちます。