A riesgo de repetirme demasiado: cada elemento del diseño web es una caja rectangular. Este fue mi momento ah-ha que realmente me ayudó a comenzar a comprender el diseño web basado en CSS y lograr los diseños que quería lograr. Hemos hablado un poco sobre la ubicación de estas cajas y sobre su comportamiento.
De lo que no hemos hablado mucho es de la caja en sí. ¿Cómo se calcula exactamente el tamaño de la caja?
A continuación se muestra un diagrama:
Si es un usuario de Firebug, es posible que esté acostumbrado a un diagrama como este, que hace un buen trabajo al mostrarle los números que afectan a cualquier cuadro de la página:
Observe que en ambos ejemplos el margen está en blanco. El margen es único en el sentido de que no afecta el tamaño del cuadro en sí mismo, pero afecta a otros contenidos que interactúan con el cuadro y, por lo tanto, a una parte importante del modelo de cuadro CSS.
El tamaño de la caja en sí se calcula así:
| Ancho | ancho + relleno-izquierdo + relleno-derecho + borde-izquierdo + borde-derecho |
| Altura | altura + padding-top + padding-bottom + border-top + border-bottom |
¿Qué pasa si estos valores no se declaran?
Si el relleno o los bordes no están declarados, son cero (probablemente si está usando un restablecimiento de CSS) o el valor predeterminado del navegador (probablemente no cero, especialmente en elementos de formulario que normalmente no se restablecen).
Si el ancho de una caja no se declara (y la caja es un elemento a nivel de bloque), las cosas se ponen un poco más raras. Comencemos con eso y luego pasemos a otras cosas buenas sobre el modelo de caja.
El ancho predeterminado de los cuadros de nivel de bloque
Si no declara un ancho y el cuadro tiene una posición estática o relativa, el ancho permanecerá al 100% de ancho y el relleno y el borde empujarán hacia adentro en lugar de hacia afuera. Pero si establece explícitamente el ancho del cuadro en 100%, el relleno empujará el cuadro hacia afuera como de costumbre.
La lección aquí es que el ancho predeterminado de un cuadro no es realmente el 100%, sino un “lo que queda” menos tangible. Es particularmente valioso saber esto, ya que hay muchas circunstancias en las que es inmensamente útil para cualquiera colocar o no establecido un ancho.
El mayor mordedor que siempre encuentro con esto son los elementos de área de texto, que necesitan mucho que se establezcan sus anchos para combatir el atributo “cols” requerido, y no pueden tener elementos secundarios. Por lo tanto, a menudo necesita que el área de texto se establezca explícitamente en 100%, pero que también tenga relleno, lo que lo empuja demasiado grande para que quepa. En un entorno de ancho estático, a menudo recurrimos a anchos de píxeles que se ajustan, pero no tenemos tanta suerte en entornos de ancho fluido.
Cajas absolutas sin ancho
Los cuadros absolutamente posicionados que no tienen un ancho establecido se comportan de manera un poco extraña. Su ancho es tan ancho como debe ser para contener el contenido. Entonces, si el cuadro contiene una sola palabra, el cuadro es tan ancho como se representa esa palabra. Si crece a dos palabras, crecerá así de ancho.
Esto debería continuar hasta que el cuadro tenga el 100% del ancho del padre (el padre más cercano con posición relativa o ventana del navegador) y luego comenzar a ajustarse. Se siente natural y normal que las cajas se expandan verticalmente para acomodar el contenido, pero se siente extraño cuando sucede horizontalmente. Esa extraña sensación está justificada, ya que hay muchas peculiaridades en la forma en que los diferentes navegadores manejan esto, sin mencionar el hecho de que el texto se representa de manera diferente en las plataformas.
Cajas flotantes sin ancho
El mismo comportamiento exacto se observa con elementos flotantes sin ancho. El cuadro es solo tan ancho como debe ser para acomodar el contenido, hasta tan ancho como su elemento principal (aunque no necesita estar relativamente posicionado). Debido a la naturaleza frágil de estos cuadros sin ancho, la lección que se debe aprender aquí es no confiar en ellos en escenarios de misión crítica, como en el diseño general de la página. Si flota una columna para usarla como barra lateral y cuenta con algún elemento dentro (como una imagen) para ser responsable de mantener su ancho, está buscando problemas.
Los elementos en línea también son cajas
Nos hemos centrado en las cajas como elementos a nivel de bloque aquí. Es fácil pensar en los elementos a nivel de bloque como cuadros, pero los elementos en línea también son cuadros. Piense en ellos como rectángulos realmente muy largos y delgados, que casualmente se envuelven en cada línea. Pueden tener márgenes, relleno y bordes como cualquier otro cuadro.
El envoltorio es lo que lo confunde. Un margen izquierdo como se muestra arriba empuja el cuadro hacia la derecha como sospecharía, pero solo la primera línea, ya que ese es el comienzo del cuadro. El relleno se aplica por encima y por debajo del texto como debería ser, y cuando se ajusta, ignora la línea sobre su relleno y comienza donde la altura de la línea dicta que debe comenzar. El fondo se aplicó con transparencia para ver cómo funciona con mayor claridad.
Míralo con tus propios ojos
¿Quieres ver todos los “recuadros” que componen una página? Intente poner esto en la hoja de estilo temporalmente:
* {
outline: 1px solid red !important;
}