インラインブロック：2つの子供の幅が100％にならない理由

Question

2つの兄弟にdisplay：inline-blockがあります。お互いの隣に座らせるために合計額を97％に下げなければならないのはなぜですか？例：https://jsfiddle.net/kcscq271/1/

<div class="container"> 
    <img src="./test.jpg"> 
    <div class="child1"> 
     Test Stuff 
    </div> 
    </div> 

.container { 
    border: 1px solid red; 
    width: 300px; 
} 

.child1 { 
    display: inline-block; 

    width: 80% 
} 

img { 
    display: inline-block; 
    width: 20%; 
} 

Answer 1

インラインブロックは、HTMLの空白をレンダリングします。次の代わりに画像の隣にdivを置く。

<div class="container"> 
    <img src="./test.jpg"><div class="child1"> 
    Test Stuff 
    </div> 
</div> 

またはこれを達成するためのもう一つの方法は、このようにHTMLを書くことです

img { 
    float: left; 
    display: inline-block; 
    width: 20%; 
} 

Answer 2

フロートを試してみてください。

<div class="container"> 
    <img src="./test.jpg"><div class="child1">Test Stuff</div> 
</div> 

または

<div class="container"> 
    <img src="./test.jpg"><!-- 
    --><div class="child1">Test Stuff</div> 
</div>