Modelo de caja

Supongamos que tienes este código 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 en 142 px de ancho, en vez de los 100 px que especificaste, y sale de tu elemento. ¿A qué se debe?

El modelo de caja es la base central de CSS. Comprender cómo el modelo de caja cómo funciona, cómo se ve afectado por otros aspectos de CSS cómo puedes controlarlo, puede ayudarte a escribir CSS más predecibles.

Comprender el modelo de caja de CSS te ayudará a determinar por qué tu el contenido no cabe dentro de un elemento.

Es importante recordar que todo lo que muestra CSS es un cuadro, incluso si es solo texto o tiene un elemento border-radius que hace que parezca un círculo.

Contenido y tamaño

Los cuadros tienen un comportamiento diferente según su valor de display, su conjunto dimensiones y contenido que contienen. Este contenido puede ser texto sin formato más cuadros generados por elementos secundarios. De cualquier manera, el contenido afecta el tamaño del cuadro de forma predeterminada.

Esto se puede controlar mediante el tamaño extrínseco o el tamaño intrínseco. para que el navegador tome decisiones por ti según el tamaño del contenido.

Esta es una demostración básica en la que se explica la diferencia:

Cuando la caja tiene un tamaño extrínseco, limita la cantidad de contenido que puedes agregar antes de que se desborde de inmediato. Esto hace que la palabra "genial" desbordamiento.

La demostración tiene las palabras "CSS es increíble". en una caja con dimensiones fijas y una 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 “increíble” es demasiado grande para la caja, por lo que sobrepasa fuera del cuadro superior cuadro de borde (más información sobre este tema más adelante). Una forma de prevenir este desbordamiento es permitir para 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 al cuadro sea tan ancho como el ancho mínimo intrínseco de su contenido (la palabra "increíble"). Esto permite que el cuadro se ajuste perfectamente al texto.

Este es un ejemplo más complejo que muestra el impacto de los diferentes tamaños en el tamaño real contenido:

El tamaño extremo permite controlar el un elemento. El tamaño intrínseco evita el desbordamiento del texto.

Activa o desactiva el tamaño intrínseco para ver cómo el tamaño extrínseco te da más y control de tamaño extrínseco y de tamaño intrínseco le da al contenido más control. 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 puede agregar antes de que se desborde, pero eso no sucede cuando el tamaño intrínseco se activado.

De forma predeterminada, este elemento tiene un conjunto width y height de 400px cada uno. Estas dimensiones otorgan límites estrictos a todo lo que está dentro del elemento, que se a menos que el contenido sea demasiado grande para el cuadro. Puedes ver esto en acción cambiando la leyenda debajo de la imagen de la flor por algo que exceda el la altura de la caja.

Término clave: El desbordamiento se produce cuando el contenido es demasiado grande para la caja en la que se encuentra. Puedes Administra la forma en que un elemento controla el contenido desbordado con la propiedad overflow.

Cambiar al tamaño intrínseco permite al navegador tomar decisiones por ti en función de el tamaño del contenido del cuadro. Esto hace que sea mucho menos probable el desbordamiento, ya que la caja cambia de tamaño con su contenido.

Es importante recordar que el tamaño intrínseco es el valor 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 de modelos de cajas que cumplen una función específica.

Un diagrama que muestra las cuatro áreas principales del modelo de cuadro: cuadro de contenido, cuadro de padding, cuadro de borde y cuadro de margen
Las cuatro áreas principales del modelo de cuadro: cuadro de contenido, cuadro de relleno, cuadro de borde y cuadro de margen.

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 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 padding está dentro del cuadro, el fondo del cuadro se puede ver 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 ocupan este espacio.

Las barras de desplazamiento se encuentran en el cuadro de padding.

El cuadro de borde rodea el cuadro de relleno, y su espacio se define por 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.

El área final, el cuadro de margen, es el espacio alrededor del cuadro, definido por regla margin del cuadro. Propiedades como outline y box-shadow también ocupan este espacio porque están pintadas sobre el elemento y no afectará el tamaño de la caja. Cambia el outline-width de 200px de tu caja el un cuadro no cambia nada dentro del borde del borde.

Un contorno amplio no afecta el tamaño del resto del elemento.

Una analogía útil

El modelo de caja es complejo de entender, así que aquí hay una analogía de lo que aprendido hasta ahora.

Tres marcos de fotos.
El modelo de caja ilustrado con marcos de fotos físicos.

En este diagrama, hay tres marcos de fotos montados uno al lado del otro en una pared. Los elementos de la imagen enmarcada corresponden al modelo de cuadros de la siguiente manera:

  • El cuadro de contenido es el material gráfico.
  • La caja de relleno es la placa de montaje blanca, entre el marco y las obras de arte.
  • El cuadro del borde 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 del modelo de cuadro de un cuadro seleccionado cálculos, que pueden ayudarte a entender cómo funciona el modelo de caja y cómo afecta el sitio web en el que estás trabajando.

Pruébalo en tu propio navegador:

  1. Abre Herramientas para desarrolladores.
  2. Selecciona un elemento.
  3. Mostrar el depurador del modelo de cuadros.
El depurador de modelos de cuadros para la demostración de esquema.

Controla el modelo de caja

Para entender cómo controlar el modelo de caja, primero debe comprender qué se ejecute en tu navegador.

Cada navegador aplica una hoja de estilo del usuario-agente a los documentos HTML que define cómo deben verse y comportarse los elementos si no tienen una CSS definida. El CSS en Las hojas de estilo del usuario-agente varían según el navegador, pero proporcionan predeterminadas para que el contenido sea más fácil de leer.

Una propiedad, la hoja de estilo del usuario-agente establece el display predeterminado de un cuadro. Para ejemplo, en un flujo normal, el valor predeterminado de display de un elemento <div> es block, un <li> tiene un valor predeterminado de display de list-item, y un <span> tiene un valor predeterminado de display de inline.

Un elemento inline tiene un margen de bloqueo, pero otros elementos no lo respetan. Con inline-block, los demás elementos respetan el margen del bloque, pero el primero conserva la mayoría de los mismos comportamientos que tenía como un elemento inline. Un elemento block llena el espacio intercalado disponible de forma predeterminada, mientras que Los elementos inline y inline-block son tan grandes como su contenido.

La hoja de estilo del usuario-agente también configura box-sizing, que le indica al cuadro cómo calcular su tamaño de caja. De forma predeterminada, todos los elementos tienen el siguiente usuario-agente estilo: box-sizing: content-box;. Esto significa que cuando estableces dimensiones como como width y height, esas dimensiones se aplican al cuadro de contenido. Si luego, estableces padding y border, estos valores se agregan a la carpeta de tamaño del ensamble.

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?

260px
200px

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 de el ancho del contenido, y se agregan padding y border en ambos lados a sobre eso. 200 px para el contenido + 40 px de relleno + 20 px de borde hacen un total el ancho visible de 260 px

Puedes cambiar esto especificando el tamaño 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 el width al cuadro del borde. en lugar de en el cuadro de contenido. Esto significa que nuestro border y padding obtienen se envió, por lo que, cuando configuras .my-box para que tenga un ancho de 200px, en realidad se renderiza con un ancho de 200px.

Mira cómo funciona en la siguiente demostración interactiva. Al activar o desactivar el box-sizing, el área azul muestra qué CSS se está aplicando dentro del .

Compara los efectos del tamaño del cuadro de contenido y del cuadro de borde.
*,
*::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 ahora cada elemento usa este modelo de cuadro alternativo.

Debido a que el modelo de caja alternativo puede ser más predecible, los desarrolladores suelen agregar esta regla a restablecimientos y normalizadores, como este.

Recursos

Hojas de estilo del usuario-agente