The CSS Podcast - 001: The Box Model
Supongamos que tienes este fragmento de HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Luego, escribes este CSS para él:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
El contenido termina con 142 px de ancho, en lugar de los 100 px que especificaste, y se sale del elemento. ¿A qué se debe?
El modelo de caja es un fundamento básico de CSS. Comprender cómo funciona el modelo de caja, cómo se ve afectado por otros aspectos de CSS y, lo que es más importante, cómo puedes controlarlo, puede ayudarte a escribir CSS más predecible.
Es importante recordar que todo lo que muestra CSS es una caja, incluso si solo es texto o tiene un border-radius que hace que parezca un círculo.
Contenido y tamaño
Las cajas tienen un comportamiento diferente según su valor display, sus dimensiones establecidas y el contenido que contienen. Este contenido puede ser texto sin formato o más cajas generadas por elementos secundarios. De cualquier manera, el contenido afecta el tamaño de la caja de forma predeterminada.
Puedes controlar esto con el tamaño extrínseco o usar el tamaño intrínseco para permitir que el navegador tome decisiones por ti según el tamaño del contenido.
Esta es una demostración básica que explica la diferencia:
La demostración tiene las palabras "CSS is awesome" en una caja con dimensiones fijas y un borde grueso. Debido a que la caja tiene un ancho especificado, tiene un tamaño extrínseco.
Esto significa que controla el tamaño de su contenido secundario. Sin embargo, la palabra "awesome" es demasiado grande para la caja, por lo que se desborda fuera del cuadro de borde de la caja superior (más adelante). Una forma de evitar este desbordamiento es permitir que la caja tenga un tamaño intrínseco, ya sea sin establecer el ancho o, en este caso, estableciendo el width en min-content. La palabra clave min-content le indica a la caja que solo tenga el ancho mínimo intrínseco de su contenido (la palabra "awesome"). Esto permite que la caja se ajuste perfectamente alrededor del texto.
Este es un ejemplo más complejo que muestra el impacto de los diferentes tamaños en el contenido real:
Activa y desactiva el tamaño intrínseco para ver cómo el tamaño extrínseco te da más control y el tamaño intrínseco le da más control al contenido. Para ver los efectos, agrega algunas oraciones de texto a la tarjeta. Cuando este elemento tiene un tamaño extrínseco, hay un límite para la cantidad de contenido que puedes agregar antes de que se desborde, pero eso no sucede cuando se activa el tamaño intrínseco.
De forma predeterminada, este elemento tiene un width y una height establecidos de 400px cada uno.
Estas dimensiones dan límites estrictos a todo lo que está dentro del elemento, que se respetan a menos que el contenido sea demasiado grande para la caja. Puedes ver esto en acción si cambias el título debajo de la imagen de la flor por algo que supere la altura de la caja.
Término clave: El desbordamiento ocurre cuando el contenido es demasiado grande para la caja en la que se encuentra. Puedes administrar cómo un elemento controla el contenido desbordado con la propiedad overflow.
Si cambias al tamaño intrínseco, el navegador tomará decisiones por ti según el tamaño del contenido de la caja. Esto hace que el desbordamiento sea mucho menos probable porque la caja cambia de tamaño con su contenido.
Es importante recordar que el tamaño intrínseco es el comportamiento predeterminado del navegador y, por lo general, proporciona mucha más flexibilidad que el tamaño extrínseco.
Las áreas del modelo de caja
Las cajas se componen de distintas áreas del modelo de caja que realizan un trabajo específico.
El cuadro de contenido es el área en la que reside el contenido. El contenido puede controlar el tamaño de su superior, por lo que suele ser el área de tamaño más variable.
El cuadro de relleno rodea el cuadro de contenido y es el espacio creado por
la propiedad padding.
Debido a que el relleno está dentro de la caja, el fondo de la caja es visible en el espacio que crea.
Si la caja tiene reglas de desbordamiento establecidas, como overflow: auto o overflow: scroll, las barras de desplazamiento también ocupan este espacio.
El cuadro de borde rodea el cuadro de relleno y su espacio se define por el
border valor, que
crea un marco visual para el elemento. El borde del elemento es el límite de lo que puedes ver.
El área final, el cuadro de margen, es el espacio alrededor de la caja, definido por la
regla margin de la caja. Las propiedades como
outline y
box-shadow
también ocupan este espacio porque se pintan sobre el elemento y no
afectan el tamaño de la caja. Si cambias el outline-width de 200px de la caja, no cambiará nada dentro del borde.
Una analogía útil
El modelo de caja es complejo de entender, por lo que aquí tienes una analogía de lo que aprendiste hasta ahora.
En este diagrama, tienes tres marcos de fotos montados uno al lado del otro en una pared. Los elementos de la imagen enmarcada corresponden al modelo de caja de la siguiente manera:
- El cuadro de contenido es la obra de arte.
- El cuadro de relleno es el tablero de montaje blanco, entre el marco y la obra de arte.
- El cuadro de borde es el marco, que proporciona un borde literal para la obra de arte.
- El cuadro de margen es el espacio entre los marcos.
- La sombra ocupa el mismo espacio que el cuadro de margen.
Depura el modelo de caja
Las herramientas para desarrolladores del navegador proporcionan una visualización de los cálculos del modelo de caja de una caja seleccionada, lo que puede ayudarte a comprender cómo funciona el modelo de caja y cómo afecta al sitio web en el que estás trabajando.
Para probar esto en Chrome, haz lo siguiente:
- Abre las Herramientas para desarrolladores.
- Selecciona un elemento.
- Muestra el depurador del modelo de caja.
Controla el modelo de caja
Para comprender cómo controlar el modelo de caja, primero debes comprender lo que sucede en tu navegador.
Cada navegador aplica una hoja de estilo de usuario-agente a los documentos HTML. La hoja de estilo define cómo deben verse y comportarse los elementos si no se les da un CSS definido. El CSS en las hojas de estilo de usuario-agente varía según el navegador, pero cada navegador tiene valores predeterminados que facilitan la lectura del contenido.
La hoja de estilo de usuario-agente establece el valor predeterminado para los elementos que toman display. Por ejemplo, el valor display predeterminado de un elemento <div> es
block, un <li> tiene un valor display predeterminado de list-item y un <span>
tiene un valor display predeterminado de inline.
Un elemento inline tiene un margen de bloque, pero otros elementos no lo respetan.
Con inline-block, otros elementos respetan el margen de bloque, pero el primer
elemento conserva la mayoría de los mismos comportamientos que tenía como un elemento inline.
Un elemento block completa el espacio intercalado disponible de forma predeterminada, mientras que
inline y inline-block elementos solo son tan grandes como su contenido.
La hoja de estilo de usuario-agente también establece valores predeterminados para box-sizing, que le indica a una caja cómo calcular su tamaño. De forma predeterminada, todos los elementos se establecen en box-sizing: content-box;. Esto significa que, cuando estableces dimensiones como width y height, esas dimensiones se aplican al cuadro de contenido. Si luego estableces padding y border, estos valores se agregan al tamaño del cuadro de contenido.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las propiedades que afectan el tamaño del modelo de caja.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
¿Qué ancho crees que tendrá .my-box?
200px sería correcto si la caja tuviera box-sizing: border-box.
El ancho real de esta caja es de 260 px.
Debido a que el CSS usa el box-sizing: content-box predeterminado, el ancho aplicado es el ancho del contenido, y se le agregan padding y border en ambos lados. 200 px para el contenido + 40 px de relleno + 20 px de borde hacen un ancho visible total de 260 px.
Puedes cambiar esto si especificas el tamaño border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Este modelo de caja alternativo le indica a CSS que aplique el width al cuadro de borde en lugar del cuadro de contenido. Esto significa que nuestro border y padding se
insertan, por lo que, cuando estableces que .my-box tenga un ancho de 200px, en realidad se renderiza
con un ancho de 200px.
Consulta cómo funciona en la siguiente demostración interactiva. Cuando activas o desactivas el valor box-sizing, el área azul muestra qué CSS se aplica dentro de la caja.
*,
*::before,
*::after {
box-sizing: border-box;
}
Esta regla de CSS selecciona cada elemento del documento y cada seudoelemento ::before y ::after, y aplica box-sizing: border-box.
Esto significa que cada elemento ahora usa este modelo de caja alternativo.
Debido a que el modelo de caja alternativo puede ser más predecible, los desarrolladores suelen agregar esta regla a los restablecimientos y normalizadores, como A (more) Modern CSS Reset.