box-sizing が一部にしか効きません

Question

以下のサイトにコードを貼りました。
http://scratchpad.io/alert-disgust-1126

ボックスを横に並べて表示したいのですが、border-sizing がうまく効かず困っています。

*{
  box-sizing: border-box
}

とやっていて、この div 意外は効果があるのに、なぜかこの div だけが効きません。どうしたらいいのでしょうか？

Answer 1

box-sizingにborder-boxを指定した場合にも、marginの幅はwidthに含まれません。
widthに含まれるのはpaddingとborder-widthとなります。
なので、先頭３つのdivが横並びにならないのは正しい表示と言えます。
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

また、最新ブラウザのみが対象であれば、flexboxを利用した方がより、簡単にCSSを記述出来ます。

Comments

[bouyomisan]

ありがとうございます！基本的な箇所が抜けてました、覚えておきます！