web-dev-qa-db-ja.com

CSS3ボックスサイズ：margin-box;何故なの？

box-sizing: margin-box;がないのはなぜですか？通常、スタイルシートにbox-sizing: border-box;を配置するとき、実際には前者を意味します。


例：

2列のページレイアウトがあるとします。両方の列の幅は50％ですが、Gutter（中央のギャップ）がないため、見た目がkindく見えます。以下は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;よりも有用でなければ、これはvery有用だと思います。

csscss3layoutpositionw3c
132
Web_Designer

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

52
Slouch

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

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

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

ブラウザ開発者が開発しない単純な機能があります。

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

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

16
peterh

一番上の男は、パディングとボーダーを含む全体の幅にマージンを追加することについて尋ねています。問題は、border-boxを使用する場合、ボックスの外側にマージンが適用され、パディングとボーダーは適用されないことです。

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

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

border-boxは、要素の幅+パディング+境界線を合計幅として計算します。したがって、幅が50％のdivsが2つある場合、それらは隣接します。それらに8pxパディングを追加すると、16pxの溝ができます。それにラッピング要素（8pxのパディングもあります）を組み合わせると、周囲に均等な溝があるきれいにレイアウトされたグリッドができます。

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

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

6
Morgan Feeney

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

4
Ryan

これはすべて明白だと確信していますが、とにかく入力します。次の結果は、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マージンに%幅を含めることは適切ではありませんが（通常は常にそうです）、パディングを組み込む必要がないため、相対的な割合の量を計算するのは簡単です。定義された幅の境界線。

4
Plummer

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

1
user3236407

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

少なくとも開発段階ではそのように動作し、「レスポンシブ」テンプレートが必要な場合は、マージン幅を含む幅に％に変換できます。

ガターを処理するために推奨される他の多くの場合、より簡単な方法は、疑似列を使用し、各列でcontent: '';を使用することです。 endなどの定義された最後の列であるdivクラスを設定すると、そのクラスを対象に、後の擬似を持たないか、より広いものを持たせることができます。レイアウトに最も適したものです。

この擬似要素メソッドを使用することの追加のボーナスは、リーダーモニターのフラットイメージにも3D効果と深みを与えることができる影のターゲットを提供することです。現時点では、ボタンで使用されているエフェクトを拡大し、グラデーションとz-indexを「微調整」することで、このエフェクトを試しています。

1
Weedy101

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

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

過度に制約されている場合、ブラウザは左マージンまたは右マージンを調整する必要があります。私はそれがマージンボックスの幅mustが包含ブロックの幅（すなわち100％）に等しいことを意味すると思います。

あなたの場合、 box-sizing: border-boxの透明な境界線は余白のように機能します 。

1
sam

box-sizing bodyコンテンツ内で使用すると興味深い状況があります

コンテンツなし、境界ボックスなし、左右マージンに値なしこの2つのボックスの再カウント％再カウントアルゴリズム

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

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

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

0
Dmytro Yurchenko