html - 水平分布/整列

Question

このjsfiddle http://jsfiddle.net/byronyasgur/kUgBA/3/では、右側の赤を黄色と完全に一致させようとしていますが、内側のボックスの幅を338pxにする必要がある理由に混乱しています。またはその図が何に関連しているか。それを少しでも減らすと、3 番目のボックスが次の行に飛び出します。

このデザインにはボックスがいくつあってもよいという事実を表すために、4 つのボックスがあります。

HTML

<div id="outer">
    <div id="container" >
        <div class="content">content</div>
        <div class="content">content</div>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
</div>

CSS

#outer{
    width:330px;
    margin: 0 auto;
    padding: 0;
    background: yellow; 
}

#container{
    /* background: orange; */
    padding: 0;
    margin-left: -5px;
    margin-right: -5px; 

    width:338px;
}
.content {
    width: 100px;
    background: red;
    margin: 5px;
    display: inline-block;
    height: 40px;
}

Answer 1

これはインライン要素の標準的な動作です。スペースがなくなると、新しい行に移動します。div 内のテキストと同じように、1 行に収まらない場合は次の行に続きます...

Answer 2

オレンジ色のコンテナ div が必要な理由はありますか? 赤と黄色を揃え​​ることができた唯一の方法は、コンテナー div を削除し、外側の div の幅を変更することでした。jsフィドル

HTML

<div id="outer">
    <div class="content">content</div>
    <div class="content margin">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
</div>

CSS

#outer {
    width: 318px;
    margin: 0 auto;
    padding: 0;
    background: yellow; 
}

.content {
    width: 100px;
    background: red;
    display: inline-block;
    height: 40px;
}

.margin {
    margin: 5px;
}