[解決済み] box-sizing: border-boxが効かないようです。

質問

この問題に出会ったことはないのですが、簡単に言うと、私はすべての要素にボックスサイズとしてボーダーボックスを適用しています。

*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

私は、レスポンシブカラムレイアウト（この場合は1行3カラム）にしています。

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

.propertyのdivにmarginを追加するまでは、3列にわたってすべてきれいに広がります。通常はborder-boxのため、列の間にmarginを追加するだけで、3列のままになりますが、なぜか3列目が新しい行に押し出されています。

jsFiddleでのライブ例です。 http://jsfiddle.net/NmrZZ/

解決方法は？

Margin は box-model の一部ではないので（どのような box-sizing を使用する場合でも）、常に宣言した width + padding + border に追加されることになります。

下の画像( CSSトリック このトピックの記事) は、標準的なボックス モデルと box-sizing: border-box :

私ができる最善のアドバイスは、グリッドのマージンを完全に排除し、プレゼンテーションから切り離しておくことです。これはより多くのマークアップを意味しますが、頭痛の種を減らし、物事をより簡単に維持することができます。以下はその例です。 このフォーク をご覧ください。修正したCSSです。

.span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

そして、新しいマークアップは、次のようになります。

<div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>