El podcast de CSS - 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, escribe este CSS para él:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
El contenido termina de 142 px de ancho, en lugar de los 100 px que especificaste, y sale de tu elemento. ¿A qué se debe?
El modelo de caja es una base fundamental 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 predecibles.
Es importante recordar que todo lo que muestra CSS es un cuadro, incluso si solo es texto o tiene un border-radius que parece un círculo.
Contenido y tamaño
Los cuadros tienen un comportamiento diferente según su valor display, las dimensiones establecidas y el contenido que contienen. Este contenido puede ser texto sin formato o más cuadros generados por elementos secundarios. De cualquier manera, el contenido afecta el tamaño del cuadro de forma predeterminada.
Puedes controlar esto con el tamaño extrínseco o puedes usar el tamaño intrínseco para permitir que el navegador tome decisiones por ti en función del tamaño del contenido.
A continuación, te presentamos una demostración básica que explica la diferencia:
La demostración tiene las palabras “CSS impresionante” en un cuadro con dimensiones fijas y un borde grueso. Debido a que el cuadro tiene un ancho especificado, tiene un tamaño extrínseco.
Esto significa que controla el tamaño del contenido secundario. Sin embargo, la palabra "impresionante" es demasiado grande para el cuadro, por lo que se desborda fuera del cuadro de borde del cuadro superior (más adelante hablaremos de ello). Una forma de evitar este desbordamiento es dejar que el tamaño del cuadro tenga un tamaño intrínseco. Para ello, no establezcas el ancho o, en este caso, establezcas width en min-content. La palabra clave min-content le indica al cuadro que sea tan ancho como el ancho mínimo intrínseco de su contenido (la palabra "increíble"). Esto permite que el cuadro encaje perfectamente alrededor del texto.
A continuación, te mostramos un ejemplo más complejo que muestra el impacto de diferentes tamaños en el contenido real:
Activa o desactiva el tamaño intrínseco para ver cómo te da más control con el tamaño extrínseco y el intrínseco le otorga 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, existe 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 conjunto width y un height de 400px cada uno.
Estas dimensiones otorgan límites estrictos a todo lo que está dentro del elemento y se respetan, a menos que el contenido sea demasiado grande para el recuadro. Puedes ver esto en acción si cambias la leyenda debajo de la foto de la flor a algo que exceda la altura del cuadro.
Término clave: el desbordamiento ocurre cuando el contenido es demasiado grande para el recuadro en el que se encuentra. Puedes administrar la manera en que un elemento controla el contenido ampliado con la propiedad overflow.
Cambiar al tamaño intrínseco permite al navegador tomar decisiones por ti en función del tamaño del contenido del cuadro. Esto hace que el desbordamiento sea mucho menos probable, ya que el cuadro 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
Los cuadros se componen de áreas de modelos de caja distintas que hacen un trabajo específico.
El cuadro de contenido es el área donde se encuentra el contenido. El contenido puede controlar el tamaño de su elemento superior, por lo que esta suele ser el área de tamaño más variable.
El cuadro de padding rodea el cuadro de contenido y es el espacio creado por la propiedad padding.
Como el padding está dentro del cuadro, su fondo es visible en el espacio que crea.
Si el cuadro tiene reglas de desbordamiento configuradas, como overflow: auto o overflow: scroll, las barras de desplazamiento también ocuparán este espacio.
El cuadro de borde rodea el cuadro de padding, y su espacio se define por el valor border, que crea un marco visual para el elemento. El borde del borde del elemento es el límite de lo que puedes ver.
La última área, el cuadro de margen, es el espacio alrededor del cuadro, definido por la regla margin del cuadro. Las propiedades como outline y box-shadow también ocupan este espacio porque se pintan en la parte superior del elemento y no afectan el tamaño del cuadro. Si cambias el outline-width de 200px de un cuadro, no se modificará nada dentro del borde del borde.
Una analogía útil
El modelo de caja es complejo de entender, por lo que esta es 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 el material gráfico.
- La caja de relleno es la placa de montaje blanca, ubicada entre el marco y la obra de arte.
- El recuadro es el marco que proporciona un borde literal para el material gráfico.
- 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 un cuadro seleccionado, 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.
Prueba esto en tu propio navegador:
- Abre Herramientas para desarrolladores.
- Selecciona un elemento.
- Muestra el depurador de modelos de cuadros.
Controla el modelo de caja
Para comprender cómo controlar el modelo de caja, primero debes comprender qué sucede en tu navegador.
Todos los navegadores aplican una hoja de estilo de usuario-agente a los documentos HTML que define el aspecto y el comportamiento de los elementos si no tienen un CSS definido. El CSS en las hojas de estilo del usuario-agente varía según el navegador, pero proporcionan valores predeterminados sensibles para facilitar la lectura del contenido.
Una propiedad en la que la hoja de estilo del usuario-agente establece el display predeterminado de un cuadro. Por ejemplo, en un flujo normal, 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 del bloque, pero el primer elemento mantiene la mayoría de los mismos comportamientos que tenía como un elemento inline.
Un elemento block ocupa el espacio intercalado disponible de forma predeterminada, mientras que los elementos inline y inline-block solo son tan grandes como su contenido.
La hoja de estilo del usuario-agente también configura box-sizing, lo que le indica a un cuadro cómo calcular su tamaño. De forma predeterminada, todos los elementos tienen el siguiente estilo de usuario-agente: box-sizing: content-box;. Esto significa que, cuando configuras dimensiones como width y height, estas se aplican al cuadro de contenido. Si luego configuras 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é tan ancho crees que será .my-box?
200px sería correcto si la caja tuviera box-sizing: border-box.
El ancho real de este cuadro 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 padding y border en ambos lados se agregan a eso. 200 px para el contenido + 40 px de relleno + 20 px de borde hace que el ancho visible total sea de 260 px.
Puedes cambiar esto si especificas el tamaño de border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Este modelo de cuadro alternativo le indica a CSS que aplique width al cuadro del borde en lugar del cuadro de contenido. Esto significa que los objetos border y padding se envían, por lo que, cuando configuras .my-box para que tenga el ancho 200px, en realidad se renderiza con el ancho 200px.
Mira cómo funciona en la siguiente demostración interactiva. Cuando activas o desactivas el valor box-sizing, el área azul muestra qué CSS se está aplicando dentro del cuadro.
*,
*::before,
*::after {
box-sizing: border-box;
}
Esta regla de CSS selecciona todos los elementos 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 cuadro alternativo puede ser más predecible, los desarrolladores suelen agregar esta regla a los restablecimientos y normalizadores, como esta.