Cuando uso el tamaño de caja: border-box en CSS, supongo que el ancho total de un elemento se definirá en su valor de "ancho". Entonces, si digo que el ancho de una división es 20px y el borde derecho es 10px, terminaré con una caja que ocupará el espacio de 20px y la otra mitad es el borde derecho. Empujándolo hasta el punto en que establecen el ancho de 10px y el borde derecho, también, como aquí:¿Por qué tamaño de caja: border-box todavía muestra el borde con un ancho de 0px?
#box{
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 100px;
background: black;
border-right: 10px solid red;
}
la caja única consistirá en el borde rojo. ¿Qué debería pasar cuando establezco el ancho en 0px? Pensé que lo haría desaparecer todo, pero no, el resultado es exactamente el mismo que el anterior: jsFiddle
Mi pregunta es si este es el comportamiento esperado. Me parece inconsistente Me gustaría hacer desaparecer una caja solo manipulando el ancho/alto. Gracias por cualquier entrada.
¿Qué navegador está utilizando? No todos los navegadores admiten tamaño de caja directamente. Algunos tienen su propio tamaño de caja, como '-moz-box-sizing' y' -webkit-box-sizing'. Si quieres hacer desaparecer algo, considera usar 'display: none;' o 'visibility: hidden;' – Jrod
También podría usar un martillo para romper un huevo ... pero estoy tratando de no hacerlo :) Es broma, realmente necesita el elemento para desaparecer así ... piensa en una rendija ... – Seka
¿Te refieres a algún tipo de animación en la que lentamente reduces el ancho a nada? No estoy exactamente seguro de lo que quiere decir con una hendidura. Si pudiera explicar exactamente lo que está tratando de lograr, tal vez haya otra solución más adecuada. Como con la mayoría de las cosas, hay muchas maneras de hacerlo. Tal vez una garra es una mala elección, pero tal vez un martillo desgarrador esté a la vuelta de la esquina. – Jrod