CSS3ボックスサイズ：マージンボックス; 何故なの？

どうしてないのbox-sizing: margin-box;？通常box-sizing: border-box;、スタイルシートに入れるときは、前者を意味します。

例：

2列のページレイアウトがあるとします。両方の列の幅は50％ですが、ガター（中央にギャップ）がないため、見栄えがよくありません。以下はCSSです：

.col2 {
    width: 50%;
    float: left;
}

ガターを適用するには、2つの列の最初の列に右マージンを設定するだけでよいと考えるかもしれません。このようなもの：

.col2:first-child {
    margin-right: 24px;
}

ただし、次のことが当てはまるため、2番目の列が新しい行に折り返されます。

50% + 50% + 24px > 100%

box-sizing: margin-box;要素の計算された幅にマージンを含めることにより、この問題を解決します。これは、と同じくらい有用ではないとしても、非常に有用だと思いますbox-sizing: border-box;。

width: calc(50% - 24px);colsに使用できませんか？次に、マージンを設定します。

私たちは持っていることができると思いますbox-sizing: margin-box。cssボックスモデルは、フレームのマージンの位置を正確に示しています。

小さな問題があります-たとえば、マージンボックスが重なる可能性があります-しかし、それらを解決するのは難しくありません。

overflow-x＆のoverflow-y組み合わせ、テーブルセルに配置された絶対div、ボックスのサイズとmin | max-width | heightの組み合わせなどでわかるように、状況は同じだと思います。

ブラウザ開発者が開発していない、本当にシンプルな機能があります。

私見、box-sizing: margin-box非常に便利な機能でした。もう1つの便利な機能はでしたbox-sizing: padding-box。これは少なくとも標準には存在しますが、主要なブラウザーには実装されていません。最新のクロームにもありません！

注：@Oriolのコメント：Firefoxはbox-sizing：padding-boxを実装しました。しかし、他の人はそうせず、それは仕様から削除されました。Firefoxはバージョン50でそれを削除します。悲しいです。

一番上の男は、パディングとボーダーを含む全体の幅にマージンを追加することを求めています。実は、マージンはボックスの外側に適用され、パディングとボーダーは適用されませんborder-box。

私はそのborder-margin考えを達成しようとしました。私が見つけたのは、マージンを使用する場合.last、最後のアイテムにクラスを追加できることです（マージンを使用してから、マージン0を適用するか、を使用します:last-child/:last-of-type）。または、全体に等しいマージンを追加します（上記のパディングバージョンと同様）。

ここの例を参照してください：http : //codepen.io/mofeenster/pen/Anidc

border-box要素の幅+そのパディング+ボーダーを合計幅として計算します。したがって、div幅が50％の2 秒がある場合、それらは隣接します。8pxそれらにパディングを追加すると、の余白ができ16pxます。それをラッピング要素と組み合わせます-これもパディングがあります8px-等間隔の溝がうまく配置されたグリッドがあります。

こちらの例をご覧ください：http : //codepen.io/mofeenster/pen/vGgje

後者は私のお気に入りの方法です。

これはすべて明白だと思いますが、とにかくタイプアウトします。以下の結果は、単に効率的なほどではないでしょうbox-sizing: margin-box;。

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizing要素の全体のサイズに対してパディングとボーダーが評価されるポイントを制御するために使用されます。したがってpx、%幅にマージンを含めることは（通常は常にそうです）粗雑ではありませんが、定義された幅にパディングとボーダーを組み込む必要がないため、相対パーセンテージの金額を簡単に計算できます。

これは、box-sizing属性が、特定のディメンション固有の値（パディング、ボーダー）を計算した後の要素のサイズを参照するためです。"box-sizing：border-box"は要素の高さ/幅を設定し、パディングと境界幅を考慮します。要素のマージンの範囲は要素自体よりも大きいため、ページとその周囲の要素のフローが変更され、兄弟要素と比較して要素が親内に収まる方法が直接変更されます。最終的に「マージンボックス」属性値は大きな問題を引き起こし、基本的に要素の高さ/幅を直接設定するのと同じです。

上Codropsオーバーフローに強制余白と行のの効果の対象に良い記事がいくつかあります。彼らは、ノーマライザのcss設定でremまたはemユニットを使用して、すべてのブラウザのフォントサイズを100％に設定することを提案しています。全幅。16pxから1 emへの変換は、ターゲットビューポートの合計幅を計算する方法です。

少なくとも開発段階では同様に機能し、「レスポンシブ」テンプレートが必要な場合は、幅をマージン幅を含めて％に変換できます。

ガターを処理するために彼らが提案する他の、多くの場合より簡単な方法は、content: '';私が見つける各列で疑似afterとon を使用することです。endなどの定義された最後の列であるdivクラスを設定すると、そのクラスをターゲットにして、疑似afterを持たないようにするか、またはより広いクラスを持たせることができます。これは、レイアウトに最適です。

この疑似要素メソッドを使用することの追加の利点は、リーダーモニター上のフラットイメージに、より3D効果とより深い深度を与えることができるシャドウのターゲットも提供することです。現時点では、ボタンで使用されている効果をスケールアップし、グラデーションを「調整」し、Zインデックスを設定することで、この効果を実験しています。

通常のフローにおけるブロックレベルの非置換要素の次元は、満たす必要があります

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right =包含ブロックの幅

過剰に制約されている場合、ブラウザは左マージンまたは右マージンのいずれかを調整する必要があります。つまり、マージンボックスの幅は、それを含むブロックの幅（つまり100％）と等しくなければならないということです。

あなたの場合、透明なボーダーはbox-sizing: border-boxマージンと同じように機能します。

おそらくRGBAを使用してボーダーを不透明度0％に設定し、ボーダーをマージンとして使用します。

ボディコンテンツ内でボックスサイズを使用するときに興味深い状況

内容なしボーダーボックスがないため、左右のマージンに値はありません。この2つのボックスの再カウント％再カウントアルゴリズム

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57より前のバージョンのFirefoxでは、box-sizingのpadding-box値もサポートされていましたが、この値は仕様およびそれ以降のバージョンのブラウザーから削除されました。

マージンボックスも計画されていません...