ボックスサイズに余白が含まれていないのはなぜですか

境界ボックスにサイジングすることでグリッドに溝ができるようになりましたが、列が12行に及んでも全部。私は実際にボックスサイズをborder-boxに設定すると、設定された幅と高さにパディング、マージン、ボーダーの両方が追加されると考えました。ボックスサイズに余白が含まれていないのはなぜですか

   <div class="row> 
        <div class="col-6"></div> 
        <div class="col-4"></div> 
        <div class-"col-2"></div> 
       </div> 

       [class*="col-"] { 
       padding: 15px; 
       margin: 5px; 
       float: left; 
       } 
       * { 
        box-sizing: border-box; 
       }

私はグリッドにいくつかの溝を与えることができますか？ marginが含まれていませんbox-sizing以来

出典

2016-09-18 pedroyanky

'ボーダー-box'作品を（これはなどブートストラップはそれを動作させるために行う方法もある）の簡単な方法ですパディングのために余白のために 'width：calc（100％ - 10px）'のような幅からそれを引く必要があります。 –

マージンが垂直方向に崩れるという点で 'margin-box'に問題があります。たとえば、10ピクセルのマージンを持つ10ピクセルブロックは30ピクセル高いでしょう。しかし、15pxマージンのブロックが続くと、ボトムマージンは効果的に15pxになるので、マージンボックスは35pxになります！これで一貫した計算を行うことは困難です。 –

@ Mr Lister：問題を悪化させるために、実装では折りたたみ時に実際にマージンのサイズを変更しないので、マージンボックスのサイズは変更されません。 [dbaronは、マージンボックスを回避策としてパディングボックス（または境界ボックス）のように動作させることを提案した]（https://lists.w3.org/Archives/Public/www-style/1999Oct/0083.html）、明らかに非常にきれいな解決策ではありません。 – BoltClock

は、ここに

* { 
 
    box-sizing: border-box; 
 
} 
 
[class*="col-"] { 
 
    padding: 15px; 
 
    margin: 5px; 
 
    float: left; 
 
} 
 
.col-6 { 
 
    width: calc(50% - 10px); 
 
} 
 
.col-4 { 
 
    width: calc(33.33% - 10px); 
 
} 
 
.col-2 { 
 
    width: calc(16.67% - 10px); 
 
} 
 

 
/* for styling this sample */ 
 
.row div { 
 
    border: 1px solid; 
 
    padding: 20px; 
 
}

<div class="row"> 
 
    <div class="col-6"></div> 
 
    <div class="col-4"></div> 
 
    <div class="col-2"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-2"></div> 
 
    <div class="col-4"></div> 
 
    <div class="col-2"></div> 
 
    <div class="col-4"></div> 
 
</div>

出典

2016-09-18 08:46:16 LGSon

ボックスサイズに余白が含まれていないのはなぜですか

答えて

関連する問題