El modelo de caja

Traducción en progreso.

Todo en CSS tiene una caja alrededor, y comprender estas cajas  es clave para poder crear diseños con CSS o para alinear elementos. En este artículo, echaremos un vistazo adecuado al modelo de caja CSS con el que se pueden realizar diseños más complejos con una comprensión de cómo funciona y de la terminología relacionada.

Prerrequisitos: Alfabetización informática básica, tener el software básico instalado, conocimientos básicos de como trabajar con archivos, HTML básico (véase Introducción a HTML) y una idea de como funciona el CSS (véase Primeros pasos con CSS).
Objetivo: Obtener información sobre el modelo de caja de CSS, qué constituye el modelo de caja y cómo cambiar al modelo alternativo.

Cajas en bloque y en línea

En CSS, en general, tenemos dos tipos de cajas: cajas en bloque y cajas en línea. Estas características se refieren a cómo se comporta la caja en términos de flujo de página y en relación a otras cajas en la página:

Si una caja se define como un bloque, se comportará de las siguientes maneras:

  • La caja se extenderá en la dirección en línea para llenar el espacio disponible en su contenedor. En la mayoría de los casos, esto significa que la caja será tan ancha como su contenedor, llenando el 100% del espacio disponible.
  • La caja se romperá en una línea nueva.
  • Se respetan las propiedades width y height.
  • El relleno, el margen y el borde harán que otros elementos se alejen de la caja.

A menos que decidamos cambiar el tipo de visualización a en línea, los elementos como los encabezados (por ejemplo, <h1>) y <p> usan de forma predeterminada block como su tipo de visualización externa.

Si una caja tiene un tipo de pantalla externa inline, entonces:

  • La caja no se romperá en una nueva línea.
  • Las propiedades width y height no se aplicarán.
  • Se aplicará relleno, margen y bordes, pero no hará que otras cajas en línea se alejen de la caja.

El elemento <a>, utilizado para los enlaces <span>, <em> y <strong> son ejemplos de elementos que se mostrarán en línea de forma predeterminada.

El tipo de caja aplicada a un elemento está definida por los valores de propiedad display como block y inline, y se relaciona con el valor externo de display.

Aparte: Tipos de pantalla internas y externas

En este punto, será mejor que también expliquemos los tipos de pantallas internas y externas. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización externa, que detalla si la caja es en bloque o en línea.

Sin embargo, las cajas también tienen un tipo de pantalla interna, que dicta cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en flujo normal, lo que significa que se comportan como cualquier elemento en bloque o en línea (como se explicó anteriormente).

Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores display como flex. Si establecemos display: flex; en un elemento, el tipo de pantalla externa es block, pero el tipo de pantalla interna se cambia a flex. Cualquier elemento secundario directo de esta caja se convertirá en un elemento flexible y se presentará de acuerdo con las reglas establecidas en la especificación de Flexbox, tema que veremos más adelante.

Nota: Para obtener más información acerca de los valores de visualización y cómo funcionan las cajas en el diseño en bloque y en línea, echa un vistazo a la guía de MDN de Diseño en bloque y en línea.

A medida que aprendas sobre el diseño CSS más detalladamente, encontrarás flex y otros valores internos que tus cajas pueden tener, por ejemplo, grid.

Sin embargo, el diseño en bloque y en línea es la forma predeterminada en que se comportan las cosas en la web; como dijimos anteriormente, a veces se lo conoce como flujo normal, porque si no reciben ninguna otra instrucción, nuestras cajas se presentarán en bloque o en línea.

Ejemplos de diferentes tipos de pantallas

Sigamos adelante y echemos un vistazo a algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos los cuales tienen un tipo de block de visualización externo. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una nueva línea y se expande al ancho disponible.

El segundo es una lista, que se presenta usando display: flex. Esto establece un diseño flexible para los elementos dentro del contenedor, sin embargo, la lista en sí misma es una caja en bloque y, como el párrafo, se expande al ancho completo del contenedor y se divide en una nueva línea.

Debajo tenemos un párrafo a nivel de bloque, dentro del cual hay dos elementos <span>. Estos elementos normalmente estarían inline, sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos configurado con display: block.

 

Podemos ver cómo se comportan los elementos en línea en el siguiente ejemplo. Los elementos <span> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan los saltos de línea.

También tenemos un elemento <ul> que se configura con display: inline-flex, creando una caja en línea alrededor de algunos elementos flex.

Finalmente, tenemos dos párrafos configurados con display: inline. El contenedor flexible en línea y los párrafos se ejecutan todos juntos en una línea en lugar de dividirse en nuevas líneas como lo harían si se mostraran como elementos a nivel de bloque.

En el ejemplo, puedes cambiar display: inline a display: block o display: inline-flex y a display: flex para alternar entre estos modos de visualización.

 

Encontrarás cosas como el diseño flexible más adelante en estos artículos. Lo que debes recordar es que cambiar el valor de la propiedad de display puede cambiar el tipo de visualización exterior de una caja entre bloque y línea, lo que cambia la forma en que se muestra junto con otros elementos en el diseño. 

En el resto de la lección, nos concentraremos en el tipo de pantalla externa.

¿Cuál es el modelo de caja CSS?

El modelo de caja CSS completo se aplica a cajas de bloque, las cajas en línea solo usan parte del comportamiento definido en el modelo de caja. El modelo define cómo las diferentes partes de una caja (margen, borde, relleno y contenido) funcionan juntas para crear una caja que se pueda ver en la página. Para añadir algo de complejidad adicional, hay un modelo de caja estándar y otro alternativo.

Partes de una caja

Al hacer una caja de bloque en CSS tenemos:

  • Contenido de la caja: El área donde se muestra su contenido, que puede dimensionarse utilizando propiedades como width y height.
  • Relleno de la caja: El relleno se encuentra alrededor del contenido como espacio en blanco; su tamaño se puede controlar usando padding y propiedades relacionadas.
  • Borde de la caja: El borde de la caja envuelve el contenido y cualquier relleno. Su tamaño y estilo se pueden controlar utilizando border y propiedades relacionadas.
  • Margen de la caja: El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como un espacio en blanco entre la caja y otros elementos. Su tamaño se puede controlar usando margin y propiedades relacionadas.

El siguiente diagrama muestra estas capas:

Diagrama del modelo de caja

El modelo de caja CSS estándar

En el modelo de caja estándar, si le das a una caja los atributos width y height, definirás el ancho y el alto del contenido de la caja. Cualquier relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

Si suponemos que la caja tiene el siguiente CSS que define width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

El espacio ocupado por nuestra caja usando el modelo de caja estándar en realidad será de 410 px (350 + 25 + 25 + 5 + 5), y la altura 210 px (150 + 25 + 25 + 5 + 5), ya que el relleno y el borde son agregado al ancho utilizado para el contenido de la caja.

Mostrar el tamaño de la caja cuando se usa el modelo de caja estándar.

Nota: El margen no se cuenta para el tamaño real de la caja; claro, afecta el espacio total que ocupará la caja en la página, pero solo el espacio fuera de la caja. El área de la caja se detiene en el borde, no se extiende hasta el margen.

El modelo de caja CSS alternativo

Podrías pensar que es bastante incómodo tener que sumar el borde y el relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por esta razón, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de caja estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que se usó anteriormente daría el siguiente resultado (ancho = 350 px, altura = 150 px).

Mostrar el tamaño de la caja cuando se usa el modelo de caja alternativo.

Por defecto, los navegadores usan el modelo de caja estándar. Si deseas activar el modelo alternativo para un elemento, hazlo configurando box-sizing: border-box. Al hacerlo, le estás diciendo al navegador que tome el borde de la caja como el área definida por cualquier tamaño que establezcas.

.box { 
  box-sizing: border-box; 
} 

Si quieres que todos tus elementos usen el modelo de caja alternativa (opción común entre los desarrolladores) debes establecer la propiedad box-sizing en el elemento <html>. Luego debes configurar todos los demás elementos para heredar ese valor, como se ve en el fragmento siguiente. Si deseas comprender qué se esconde detrás, consulta el artículo de CSS Trucos sobre el tamaño de las cajas.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Nota: Un dato curioso es que Internet Explorer solía usar de forma predeterminada el modelo de caja alternativa, sin ningún mecanismo disponible para cambiarla.

Jugar con los modelos de caja

En el siguiente ejemplo, puedes ver dos cajas. Ambos tienen una clase de .box, lo que les da los mismos width, height, margin, border y padding. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de caja alternativo.

¿Puedes cambiar el tamaño de la segunda caja (mediante la adición de CSS en la clase .alternate) para que coincida en anchura y altura con la primera casilla?

 

Nota: Puedes encontrar la solución aquí.

Utiliza las DevTools del navegador para ver el modelo de caja

Las herramientas de desarrollo de tu navegador pueden facilitar la comprensión del modelo de caja. Si observas un elemento en DevTools de Firefox, puedes ver el tamaño del elemento más su margen, relleno y borde. ¡Inspeccionar un elemento de esta manera es una excelente manera de descubrir si tu caja es realmente del tamaño que quieres!

Inspeccionar el modelo de caja de un elemento utilizando Firefox DevTools

Márgenes, rellenos y bordes

Ya ha visto las propiedades margin, padding y border en funcionamiento en el ejemplo anterior. Las propiedades usadas en ese ejemplo son abreviaturas y nos permiten establecer los cuatro lados de la caja a la vez. Estas abreviaturas también tienen propiedades sin abreviar equivalentes, las cuales permiten el control sobre los diferentes lados de la caja de forma individual.

Vamos a explorar estas propiedades más detalladamente.

Margen

El margen es un espacio invisible que se encuentra alrededor de la caja. Empuja otros elementos fuera de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo en un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de caja estándar o el alternativo, el margen siempre se añade después de que se haya calculado el tamaño de la caja visible.

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

En el siguiente ejemplo, prueba a cambiar los valores de margen para ver cómo se empuja la caja debido al margen que se crea o elimina el espacio (si es un margen negativo) entre este elemento y el elemento que lo contiene.

 

Colapso del margen

Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinarán para convertirse en un margen, que es el tamaño del margen individual más grande.

En el siguiente ejemplo, tenemos dos párrafos. El párrafo superior tiene un margin-bottom de 50 píxeles. El segundo párrafo tiene un margin-top de 30 píxeles. Los márgenes han colapsado, por lo que el margen real entre las cajas es de 50 píxeles y no el total de los dos márgenes.

Puedes probar esto ajustando el margin-top del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el bottom-margin del primer párrafo.

 

Hay una serie de reglas que dictan cuándo los márgenes colapsan y cuando no. Para obtener más información, consulta la página sobre el dominio del colapso del margen. Por ahora solo debes recordar que el colapso del margen es algo que puede suceder. Si estás creando un espacio con márgenes y no obtienes el espacio que esperas, probablemente lo que esté sucediendo es que han colapsado.

Borde

El borde se dibuja entre el margen y el relleno de una caja. Si estás utilizando el modelo de caja estándar, el tamaño del borde se agrega a los elementos width y height que estipulan el alto y el ancho de la caja. Si utilizas el modelo de caja alternativa, el tamaño del borde hace que la caja de contenido sea más pequeña, ya que ocupa parte del alto y del ancho disponibles.

Existe una gran cantidad de propiedades para dar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, ancho y color que podríamos querer manipular.

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de borde te brindan información sobre los diferentes estilos de borde entre los que puedes elegir.

 

Relleno

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tener cantidades negativas, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del relleno y, generalmente, se usa para alejar el contenido del borde.

Podemos controlar el relleno en cada lado de un elemento individualmente usando la propiedad padding, o cada lado individualmente usando las propiedades equivalentes:

Si cambias los valores para el relleno en la clase .box del ejemplo siguiente, puedes ver que esto cambia donde comienza el texto en relación con la caja.

También puedes cambiar el relleno en la clase .container,, que hará espacio entre el contenedor y la caja. El relleno se puede cambiar en cualquier elemento y hará espacio entre su borde y lo que esté dentro del elemento.

 

El modelo de caja y cajas en línea

Todo lo anterior se aplica plenamente a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajasen línea, como las creadas por un elemento <span>.

En el siguiente ejemplo, tenemos un <span> dentro de un párrafo al que le hemos aplicado width, height, margin, border, and padding Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.

 

Usar display: inline-block

Hay un valor especial de display que proporciona un punto medio entre inline y block. Esto es útil para situaciones en las que no deseas que un elemento se rompa en una nueva línea, pero sí deseas que respeten  width y height para evitar la superposición que se ve arriba.

Un elemento con display: inline-block hace un subconjunto de los elementos en bloque que ya conocemos:

  • Se respetan las propiedades de ancho y alto.
  • El relleno, el margen y el borde harán que otros elementos se alejen de la caja.

Sin embargo, no se divide en una nueva línea, y solo se hará más grande que su contenido si añades explícitamente propiedades width y height

En el siguiente ejemplo, hemos añadido display: inline-block a nuestro elemento <span>. Intenta cambiarlo por display: block o elimina la línea por completo para ver la diferencia en los modelos de visualización.

 

Esto puede ser útil es cuando deseas dar un enlace a un área de impacto más grande agregando padding. <a> es un elemento en línea como <span>; puedes usar display: inline-block para permitir que se configure el relleno, lo que facilita que un usuario haga clic en el enlace.

Esto se ve con bastante frecuencia en las barras de navegación. La navegación que encontrarás a continuación se muestra en una fila usando flexbox y hemos añadido relleno al elemento <a> ya que queremos poder cambiar el color de fondo (background-color) cuando se pasa el ratón por encima de <a>. El relleno parece superponerse al borde en el elemento <ul>. Esto se debe a que <a> es un elemento en línea.

Añade display: inline-block a la regla con el selector .links-list a y verás cómo soluciona este problema al hacer que otros elementos respeten el relleno.

 

Resumen

Eso es lo que debes entender sobre el modelo de caja. Es posible que desees volver a esta lección en el futuro si alguna vez te encuentras confundido acerca de cuán grandes son las cajas en su diseño.

En la siguiente lección, veremos cómo se pueden usar los fondos y bordes para hacer que tus cajas simples se vean más interesantes.

En este módulo

  1. La cascada y la herencia
  2. Selectores CSS
  3. El modelo de caja
  4. Fondos y bordes
  5. El manejo de diferentes direcciones de texto
  6. El contenido que se desborda
  7. Los valores y las unidades
  8. Dimensionar elementos en CSS
  9. Imágenes, medios de comunicación y los elementos de forma
  10. Estilo de las tablas
  11. Depurar el CSS
  12. Organizar el CSS