box-sizing：border-boxにはまだ幅が0pxのボーダーが表示されるのはなぜですか？

Question

CSSでbox-sizing：border-boxを使用する場合、要素の合計幅が "width"値で定義されると仮定します。したがって、分割の幅が20ピクセルで、右側の境界が10ピクセルだとすると、20ピクセルのスペースを占めるボックスで終わり、その半分は右の境界です。私は10pxのと右の境界に幅を設定ポイントにそれを押す、あまりにも、ここのように：

#box{ 
    overflow: hidden; 
    width: 10px; 
    box-sizing: border-box; 
    height: 100px; 
    background: black; 
    border-right: 10px solid red; 
}​ 

ボックスは、赤い枠で構成されます。幅を0pxに設定するとどうなりますか？私はそれがすべて消えるだろうと思ったが、いいえ、結果は上記のようにまったく同じです：jsFiddle

これは期待された動作であれば私の質問です。私に矛盾しているようだ。ボックスを幅/高さのみを操作して消えるようにしたいと思います。どのような入力をありがとう。

Answer 1

コンテンツ領域は、境界線の幅を引いた後に残るものです。

コンテンツの幅と高さは、境界を指定された「幅」 から各辺の パディング幅と「高さ」の特性を減算することにより計算されます。

指定された幅= 10ピクセル
境界線の幅= 10ピクセル
コンテンツ幅=指定された幅（10 PX） - ボーダーの幅（10ピクセル）
コンテンツ幅10 - 指定10 = 0

幅= 0 PX
ボーダー幅= 10ピクセル
コンテンツ幅=指定された幅（0ピクセル） - ボーダーの幅（10ピクセル）
コンテンツ幅0 - 10 = -10（ボーダーによって使用さ10ピクセルを除去することになります）コンテンツの幅と高さ

しかし

が否定（[CSS21]、セクション 10.2）ことができない、この計算は、0

指定された幅= 0 PX
で床のさborder width = 10 px
コンテンツの幅=指定された幅（0 px） - 境界の幅（10 px）
コンテンツの幅0 - 10 = 0（ボーダーによって使用される10ピクセルは削除されません） ）

display:none;またはvisibility:hidden;を使用しない場合は、width:XX;とborder-right:XX;の両方をゼロに設定する必要があります。

Answer 2

は、このスクリーンショットを見てみましょう：

全体ボックスでは、期待通りに100x100pxですが、実際の幅は90px10px +右の境界となります。したがって、幅を0に設定すると、幅はまだ0（負の幅を持つことはできません）ですが、10pxの境界線はあります。