texto - Tamaño de caja de CSS3: caja de margen; Por qué no?
estilo para cajas de texto css (8)
¿No podría usar width: calc(50% - 24px); para tus cols? Luego establece tus márgenes.
¿Por qué no tenemos box-sizing: margin-box; ? Por lo general, cuando ponemos box-sizing: border-box; en nuestras hojas de estilo realmente queremos decir lo primero.
Ejemplo:
Digamos que tengo un diseño de página de 2 columnas. Ambas columnas tienen un ancho del 50%, pero se ven feas porque no hay canal (hueco en el medio); A continuación está el CSS:
.col2 {
width: 50%;
float: left;
}
Para aplicar una cuneta, podría pensar que podríamos simplemente establecer un margen derecho en la primera de las 2 columnas; algo como esto:
.col2:first-child {
margin-right: 24px;
}
Pero esto haría que la segunda columna se ajuste a una nueva línea, porque lo siguiente es cierto:
50% + 50% + 24px > 100%
box-sizing: margin-box; Resolvería este problema al incluir un margen en el ancho calculado del elemento. Me parece muy útil si no más útil que box-sizing: border-box; de box-sizing: border-box; .
Creo que podríamos tener un box-sizing: margin-box . El modelo de css box muestra exactamente, cuáles son las posiciones de los márgenes de los marcos.
Hay problemas menores, por ejemplo, los recuadros de margen se pueden superponer, pero no son difíciles de resolver.
Creo que la situación es la misma, como podemos ver con las combinaciones overflow-x y overflow-y , con los divs posicionados absolutos en table-cells, con la combinación de min | max-width | height con el tamaño de la caja , y así.
Hay características, características realmente simples, que los desarrolladores de los navegadores simplemente no desarrollan.
En mi humilde opinión, box-sizing: margin-box fue una característica muy útil. Otra característica útil fue el box-sizing: padding-box , existe al menos en el estándar, pero no se implementó en ninguno de los principales navegadores. ¡Ni siquiera en el nuevo cromado!
Nota: Comentario de @Oriol: Firefox implementó el tamaño de la caja: caja de relleno. Pero otros no, y fue eliminado de la especificación. Firefox lo eliminará en la versión 50. Triste.
El tipo en la parte superior pregunta por agregar margen al ancho total, incluidos el relleno y el borde. El problema es que el margen se aplica fuera de la caja y el relleno y el borde no lo son cuando se utiliza border-box .
Intenté lograr la idea del border-margin . Lo que he encontrado es que si usa el margen puede agregar una clase de .last al último elemento (con margen, luego aplicar un margen de cero, o usar :last-child/:last-of-type ). O agregue márgenes iguales por todos lados (similar a la versión de relleno anterior).
Vea ejemplos aquí: http://codepen.io/mofeenster/pen/Anidc
Border-box calcula el ancho del elemento + su relleno + su borde como el ancho total. Entonces, si tienes 2 x divs que son 50%, serán adyacentes. Si agrega relleno a esos divs de, digamos, 8px, entonces tendrá un margen de 16px. Combina eso con un elemento de envoltura, que también tiene un relleno de 8px. Tendrás una cuadrícula bien diseñada con canales iguales en todos los lados.
Vea este ejemplo aquí: http://codepen.io/mofeenster/pen/vGgje
Este último es mi método favorito.
En Codrops hay un par de buenos artículos sobre el tema del efecto de los márgenes y las filas forzadas a desbordarse. Sugieren usar la unidad rem o em con un tamaño de fuente de configuración de css normalizador al 100% para todos los navegadores, luego, al establecer anchos y márgenes, es fácil hacer un seguimiento del efecto en el ancho de la fila simplemente haciendo una nota en comentarios para el ancho total Una conversión de 16px a 1 em es la forma de calcular el total de viewports apuntados witdh.
Trabajando así para la etapa de desarrollo al menos y luego, si quieres plantillas ''receptivas'', puedes convertir anchuras en% incluyendo anchos de margen.
La otra manera, a menudo más sencilla, que sugieren para manejar canales es usar el pseudo after y el content: ''''; en cada una de sus columnas que me parece que funciona muy bien. Si establece una clase div que es la última columna definida, como end, puede apuntar a esa clase para que no tenga el pseudo after o para tener una más amplia; que mejor se adapte a su diseño.
La ventaja añadida de utilizar este método de pseudo elemento es que también le ofrece un objetivo para las sombras que pueden dar un efecto más 3D y una mayor profundidad a la imagen plana en el monitor del lector también. Estoy experimentando con este efecto en este momento ampliando los efectos que se usan en los botones, ajustando los degradados y el índice z.
Esto se debe a que el atributo de tamaño de caja se refiere al tamaño de un elemento después de calcular los valores específicos de dimensión dados (relleno, bordes). "box-sizing: border-box" establece el alto / ancho de un elemento y toma en consideración el relleno así como el ancho del borde. El alcance del margen de un elemento es mayor que el elemento en sí, lo que significa que modifica el flujo de la página y sus elementos circundantes, por lo tanto, altera directamente la forma en que el elemento se ajusta dentro de su elemento primario con respecto a sus elementos hermanos. En última instancia, un valor de atributo "caja de margen" causaría problemas importantes y es esencialmente lo mismo que establecer los elementos alto / ancho directamente.
Estoy seguro de que todo esto es obvio, pero lo escribiré de todos modos porque ... bueno, necesito el ejercicio. El siguiente resultado no sería tan eficiente como 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;
}
box-sizing se usa para controlar desde qué punto se evalúan el relleno y el borde con el tamaño total del elemento. Por lo tanto, aunque no es kosher incluir px márgenes con un % ancho (como suele ser siempre el caso), es más fácil calcular cuál debe ser el porcentaje relativo porque no tiene que incorporar relleno y bordes al ancho definido.
Las dimensiones de los elementos de nivel de bloques no reemplazados en el flujo normal deben satisfacer
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ancho del bloque contenedor
Cuando se sobreexige, los navegadores deben ajustar el margen izquierdo o derecho. Creo que eso significa que el ancho del cuadro de margen debe ser igual al ancho del bloque contenedor (es decir, 100%).
Para su caso, bordes transparentes con box-sizing: border-box puede funcionar muy parecido a los márgenes .
Tal vez establezca el borde en 0% de opacidad usando RGBA y use el borde como margen.