Warum zeigt box-sizing: border-box immer noch den Rand mit einer Breite von 0px an?
Bei Verwendung von Box-Sizing: border-box in CSS gehe ich davon aus, dass die Gesamtbreite eines Elements in seinem "width" -Wert definiert wird. Wenn ich also sage, dass die Breite einer Unterteilung 20 Pixel und der rechte Rand 10 Pixel beträgt, erhalte ich eine Box, die 20 Pixel einnimmt, und die Hälfte davon ist der rechte Rand. Schieben Sie es an den Punkt, an dem ich die Breite auf 10px und den rechten Rand gesetzt habe, wie hier:
#box{
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 100px;
background: black;
border-right: 10px solid red;
}
Das Kästchen besteht nur aus dem roten Rand. Was soll passieren, wenn ich die Breite auf 0px setze? Ich dachte, es würde die ganze Sache verschwinden lassen, aber nein, das Ergebnis ist genau das gleiche wie das obige:jsFiddle
Meine Frage ist, ob dies das erwartete Verhalten ist. Scheint mir widersprüchlich. Ich möchte ein Kästchen verschwinden lassen, indem ich nur die Breite / Höhe ändere. Vielen Dank für jede Eingabe.