El modelo de caja

Cajas de bloque y en línea

En CSS tenemos varios tipos de cajas que, en general, se ajustan a las categorías de cajas de bloque y cajas en línea. El tipo se refiere a cómo se comporta la caja en cuanto al flujo de la página y en relación con otras cajas de la página. Las cajas tienen un tipo de visualización interna y un tipo de visualización externa.

En general, puedes establecer varios valores para el tipo de visualización mediante la propiedad display.

Si una caja tiene un valor de visualización block, entonces:

• La caja se colocará en una nueva línea.
• Se respetan las propiedades width y height.
• El relleno, el margen y el borde harán que otros elementos se alejen de la caja.
• Si no se especifica width, 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, la caja será tan ancha como su contenedor, ocupando el 100% del espacio disponible.

Algunos elementos HTML, como <h1> y <p>, usan block como tipo de visualización externa de forma predeterminada.

Si una caja tiene un tipo de visualización inline, entonces:

• La caja no se colocará en una nueva línea.
• Las propiedades width, height y los márgenes superior e inferior no tendrán efecto.
• El relleno y los bordes superior e inferior cambiarán el tamaño de la caja sin afectar la posición del contenido circundante, lo que puede causar superposición.
• El relleno, los márgenes y los bordes izquierdo y derecho afectarán la posición del contenido en línea circundante.

Algunos elementos HTML, como <a>, <span>, <em> y <strong>, usan inline como tipo de visualización externa de forma predeterminada.

La disposición en bloque y en línea es la forma predeterminada en la que se comportan las cosas en la web. De forma predeterminada y sin ninguna otra instrucción, los elementos dentro de una caja también se disponen en flujo normal y se comportan como cajas de bloque o en línea.

Tipos de visualización interna y externa

Se dice que los valores de visualización block e inline son tipos de visualización externa: afectan cómo se dispone la caja en relación con otras cajas a su alrededor. Las cajas también tienen un tipo de visualización interna, que determina cómo se disponen los elementos dentro de esa caja.

Puedes cambiar el tipo de visualización interna estableciendo un valor de visualización interna, por ejemplo, display: flex;. El elemento seguirá usando el tipo de visualización externa block, pero esto cambia el tipo de visualización interna a flex. Cualquier hijo directo de esta caja se convertirá en un elemento flexible y se comportará de acuerdo con la especificación de Flexbox.

Cuando avances para aprender sobre el diseño en CSS con más detalle, te encontrarás con flex y otros valores internos que pueden tener tus cajas, por ejemplo, grid.

No te preocupes demasiado por la terminología de interno y externo por ahora; esto es lo que ocurre internamente, y lo mencionamos aquí por si te lo encuentras en otro lugar. Por lo general, solo tratarás con valores únicos de display, y no necesitarás pensar mucho en ello.

Ejemplos de diferentes tipos de visualización

El siguiente ejemplo tiene tres elementos HTML diferentes, todos con un tipo de visualización externa block.

• Un párrafo con un borde añadido en CSS. El navegador lo representa como una caja de bloque. El párrafo comienza en una nueva línea y se extiende horizontalmente para llenar todo el ancho disponible.

• Una lista, que se dispone usando display: flex. Esto establece un diseño flexible para los hijos del contenedor, que son elementos flexibles dispuestos en fila de forma predeterminada. La lista en sí es una caja de bloque y, al igual que el párrafo, se expande al ancho completo del contenedor y se coloca en una nueva línea.

• Un párrafo a nivel de bloque, dentro del cual hay dos elementos <span>. Estos elementos normalmente serían inline; sin embargo, uno de ellos tiene una clase block y se establece en display: block. Como resultado, esa única palabra comienza en una nueva línea que ocupa todo el ancho de su elemento padre.

<p>Soy un párrafo. Uno corto.</p>
<ul>
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>
<p>
  Soy otro párrafo. Algunas de las <span class="block">palabras</span> se han
  envuelto en un <span>elemento span</span>.
</p>

body {
  font-family: sans-serif;
}
p,
ul {
  border: 2px solid rebeccapurple;
  padding: 0.2em;
}

.block,
li {
  border: 2px solid blue;
  padding: 0.2em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}

En el siguiente ejemplo, podemos ver cómo se comportan los elementos inline.

• Los elementos <span> del primer párrafo son en línea de forma predeterminada, por lo que no fuerzan saltos de línea.

• El elemento <ul>, que se establece en display: inline-flex, crea una caja en línea que contiene algunos elementos flexibles.

• Los dos párrafos se establecen en display: inline. El contenedor flexible en línea y los párrafos se juntan todos en una sola línea en lugar de saltar a nuevas líneas (como lo harían si se mostraran como elementos de nivel de bloque).

Para alternar entre los modos de visualización, puedes cambiar display: inline a display: block, o display: inline-flex a display: flex:

<p>
  Soy un párrafo. Algunas de las <span>palabras</span> se han envuelto en un
  <span>elemento span</span>.
</p>
<ul>
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>
<p class="inline">Soy un párrafo. Uno corto.</p>
<p class="inline">Soy otro párrafo. También uno corto.</p>

body {
  font-family: sans-serif;
}
p,
ul {
  border: 2px solid rebeccapurple;
}

span,
li {
  border: 2px solid blue;
}

ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
}

.inline {
  display: inline;
}

Lo más importante que debes recordar por ahora es: cambiar el valor de la propiedad display puede cambiar si el tipo de visualización externa de una caja es de bloque o en línea. Esto cambia la forma en que se muestra junto a otros elementos en el diseño.

¿Qué es el modelo de caja CSS?

El modelo de caja CSS en su conjunto se aplica a las cajas de bloque y define cómo las diferentes partes de una caja (margen, borde, relleno y contenido) trabajan juntas para crear una caja que puedes ver en una página. Las cajas en línea usan solo parte del comportamiento definido en el modelo de caja.

Para añadir complejidad, existe un modelo de caja estándar y otro alternativo. De forma predeterminada, los navegadores usan el modelo de caja estándar.

Partes de una caja

Una caja de bloque en CSS está formada por:

• Caja de contenido: el área donde se muestra tu contenido; ajusta su tamaño con propiedades como width y height.
• Caja de relleno: el relleno rodea el contenido como espacio en blanco; ajusta su tamaño con padding y propiedades relacionadas.
• Caja de borde: la caja de borde envuelve el contenido y cualquier relleno; ajusta su tamaño con border y propiedades relacionadas.
• Caja de margen: el margen es la capa más externa, que envuelve el contenido, el relleno y el borde como espacio en blanco entre esta caja y otros elementos; ajusta su tamaño con margin y propiedades relacionadas.

El siguiente diagrama muestra estas capas:

El modelo de caja CSS estándar

En el modelo de caja estándar, si estableces valores para las propiedades width y height en una caja, estos valores definen el width y el height de la caja de contenido. Luego, cualquier relleno y borde se añaden a esas dimensiones para obtener el tamaño total que ocupa la caja (consulta la imagen a continuación).

Si suponemos que una caja tiene el siguiente CSS:

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

El espacio real que ocupa la caja será de 410px de ancho (350 + 25 + 25 + 5 + 5) y 210px de alto (150 + 25 + 25 + 5 + 5).

El modelo de caja CSS alternativo

En el modelo de caja alternativo, cualquier ancho es el ancho de la caja visible en la página. El ancho del área de contenido es ese ancho menos el ancho del relleno y el borde (consulta la imagen a continuación). Esto es conveniente porque no hace falta sumar el borde y el relleno para obtener el tamaño real de la caja.

Para activar el modelo alternativo en un elemento, establece box-sizing: border-box en él:

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

Si suponemos que la caja tiene el mismo CSS que antes:

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

El espacio real que ocupa la caja será ahora 350px en la dirección en línea y 150px en la dirección de bloque.

Para usar el modelo de caja alternativo en todos tus elementos (una opción común entre los desarrolladores), establece la propiedad box-sizing en el elemento <html> y haz que todos los demás elementos hereden ese valor:

html {
  box-sizing: border-box;
}

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

Para entender la idea subyacente, puedes leer el artículo de CSS Tricks sobre box-sizing.

Jugar con los modelos de caja

En el siguiente ejemplo, puedes ver dos cajas. Ambas tienen una clase .box, que les da el mismo width, height, margin, border y padding. La única diferencia es que la segunda caja se ha configurado para usar el modelo de caja alternativo. ¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase .alternate) para que coincida con la primera en ancho y alto?

<div class="box">Uso el modelo de caja estándar.</div>
<div class="box alternate">Uso el modelo de caja alternativo.</div>

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

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

Usar las herramientas de desarrollo del navegador para ver el modelo de caja

Las herramientas de desarrollo de tu navegador pueden facilitar mucho la comprensión del modelo de caja: pueden mostrarte el tamaño del elemento más su margen, relleno y borde. Inspeccionar un elemento de esta manera es una excelente forma de averiguar si tu caja realmente tiene el tamaño que crees.

Márgenes, relleno y bordes

Ya has visto las propiedades margin, padding y border en acción en el ejemplo anterior. Las propiedades usadas en ese ejemplo son abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas abreviaturas también tienen propiedades equivalentes sin abreviar, que permiten controlar los diferentes lados de la caja individualmente.

Vamos a explorar estas propiedades con más detalle.

Margen

El margen es un espacio invisible alrededor de tu caja. Aleja otros elementos 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 otras cosas en la página. Ya sea que uses el modelo de caja estándar o el alternativo, el margen siempre se añade después de haber 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:

• margin-top
• margin-right
• margin-bottom
• margin-left

Jugar con los márgenes

Edita el siguiente ejemplo. Prueba a cambiar los valores de margen para ver cómo se desplaza la caja debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor.

<div class="container">
  <div class="box">Cambia mi margen.</div>
</div>

.container {
  border: 5px solid blue;
  margin: 40px;
}

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 10px;
  height: 100px;
  /* prueba cambiar las propiedades de margen: */
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}

Colapso de márgenes

Dependiendo de si dos elementos cuyos márgenes se tocan tienen márgenes positivos o negativos, los resultados serán diferentes:

• Dos márgenes positivos se combinan para convertirse en uno solo. Su tamaño será igual al del margen individual más grande.
• Dos márgenes negativos colapsarán y se usará el valor más pequeño (el más alejado de cero).
• Si un margen es negativo, su valor se restará del total.

En el siguiente ejemplo, tenemos dos párrafos. El párrafo superior tiene un margin-bottom de 50 píxeles, y el otro 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 la suma de los dos márgenes.

Puedes probar esto estableciendo el margin-top del segundo párrafo en 0. El margen visible entre los dos párrafos no cambiará: conserva los 50 píxeles establecidos en el margin-bottom del primer párrafo. Si lo estableces en -10px, verás que el margen total pasa a ser 40px: se resta de los 50px.

<div class="container">
  <p class="one">Soy el párrafo uno.</p>
  <p class="two">Soy el párrafo dos.</p>
</div>

.container {
  border: 5px solid blue;
  margin: 40px;
}

p {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 10px;
}
.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}

Una serie de reglas determinan cuándo los márgenes colapsan y cuándo no. Para más información, consulta la página detallada sobre cómo dominar el colapso de márgenes. Lo principal que debes recordar es que el colapso de márgenes es algo que puede ocurrir si estás creando espacio con márgenes y no obtienes el espacio que esperas.

Bordes

El borde se dibuja entre el margen y el relleno de una caja. Si usas el modelo de caja estándar, el tamaño del borde se añade al width y al height de la caja de contenido. Si usas el modelo de caja alternativo, cuanto más grande sea el borde, más pequeña será la caja de contenido, ya que el borde ocupa parte del width y height disponibles de la caja del elemento.

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

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

Para establecer las propiedades de cada lado individualmente, usa:

• border-top
• border-right
• border-bottom
• border-left

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

• border-width
• border-style
• border-color

Para establecer el ancho, el estilo o el color de un solo lado, usa una de las propiedades sin abreviar más específicas:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

Jugar con los bordes

En el siguiente ejemplo hemos usado varias propiedades abreviadas y sin abreviar para crear bordes. Edita las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de borde te dan información sobre los diferentes estilos de borde disponibles.

<div class="container">
  <div class="box">Cambia mis bordes.</div>
</div>

body {
  font-family: sans-serif;
}
.container {
  margin: 40px;
  padding: 20px;
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23 45 145);
}

.box {
  padding: 20px;
  background-color: lightgray;
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}

Relleno

El relleno se ubica entre el borde y el área de contenido, y se usa para alejar el contenido del borde. A diferencia de los márgenes, no puedes tener un relleno negativo. Cualquier fondo aplicado a tu elemento se mostrará detrás del relleno.

La propiedad padding controla el relleno en todos los lados de un elemento. Para controlar cada lado individualmente, usa estas propiedades sin abreviar:

• padding-top
• padding-right
• padding-bottom
• padding-left

Jugar con el relleno

En el siguiente ejemplo, edita los valores de relleno en la clase .box y observa cómo cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase .container para crear espacio entre el contenedor y la caja. Puedes cambiar el relleno en cualquier elemento para crear espacio entre su borde y lo que sea que esté dentro de ese elemento.

<div class="container">
  <div class="box">Cambia mi relleno.</div>
</div>

body {
  font-family: sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
}

.container {
  border: 5px solid blue;
  margin: 40px;
  padding: 20px;
}

El modelo de caja y las cajas en línea

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

En el siguiente ejemplo, tenemos un <span> dentro de un párrafo. Le hemos aplicado width, height, margin, border y padding. Puedes ver que el ancho, el alto y los márgenes superior e inferior no afectan al <span>. El relleno y los bordes superior e inferior alteran el tamaño de la caja en línea, pero no afectan la posición del contenido circundante. En cambio, el relleno y los bordes superior e inferior se superponen a otras palabras del párrafo. Solo el relleno, los márgenes y los bordes izquierdo y derecho afectan la posición del texto que rodea al <span>.

<p>
  Soy un párrafo y este es un <span>span</span> dentro de ese párrafo. Un span
  es un elemento en línea y por eso no respeta width ni height.
</p>

body {
  font-family: sans-serif;
}
p {
  border: 2px solid rebeccapurple;
  width: 200px;
}
span {
  margin: 20px 30px;
  padding: 10px 20px;
  width: 80px;
  height: 150px;
  background-color: lightblue;
  border: solid blue;
  border-width: 7px 1px;
}

Usar display: inline-block

display: inline-block es un valor especial de display, que ofrece un punto intermedio entre inline y block. Úsalo si no quieres que un elemento se coloque en una nueva línea, pero sí quieres que respete width y height y evite la superposición que vimos antes.

Un elemento con display: inline-block hace un subconjunto de las cosas de bloque que ya conocemos:

• Se respetan las propiedades width y height.
• padding, margin y border harán que otros elementos se alejen de la caja.

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

Jugar con inline-block

En este siguiente ejemplo, hemos añadido display: inline-block a nuestro elemento <span>. Prueba a cambiar esto a display: block, o a eliminar la línea por completo, para ver la diferencia entre los modelos de visualización:

<p>
  Soy un párrafo y este es un <span>span</span> dentro de ese párrafo. Un span
  es un elemento en línea y por eso no respeta width ni height.
</p>

body {
  font-family: sans-serif;
}
p {
  border: 2px solid rebeccapurple;
  width: 300px;
}

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}

Esto puede ser útil cuando quieres dar a un enlace un área de clic más grande añadiendo padding. <a> es un elemento en línea como <span>; puedes usar display: inline-block para poder establecerle un relleno, lo que facilita al usuario hacer clic en el enlace.

Esto se ve con bastante frecuencia en las barras de navegación. La siguiente navegación se muestra en una fila usando flexbox, y hemos añadido relleno al elemento <a> porque queremos poder cambiar el background-color cuando se pasa el cursor sobre el <a>. El relleno parece superponerse al borde del elemento <ul>. Esto se debe a que el <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 esto soluciona el problema al hacer que otros elementos respeten el relleno:

<nav>
  <ul class="links-list">
    <li><a href="">Enlace uno</a></li>
    <li><a href="">Enlace dos</a></li>
    <li><a href="">Enlace tres</a></li>
  </ul>
</nav>

ul {
  font-family: sans-serif;
  display: flex;
  list-style: none;
  border: 1px solid black;
}

li {
  margin: 5px;
}

.links-list a {
  background-color: rgb(179 57 81);
  color: white;
  text-decoration: none;
  padding: 1em 2em;
}

.links-list a:hover {
  background-color: rgb(66 28 40);
  color: white;
}

Resumen

Eso es la mayor parte de lo que necesitas entender sobre el modelo de caja. Es posible que quieras volver a esta lección en el futuro si alguna vez te encuentras confundido sobre el tamaño de las cajas en tu diseño.

En el siguiente artículo, te daremos algunas pruebas que puedes usar para comprobar qué tan bien has entendido y retenido la información que te hemos dado sobre el modelo de caja CSS.

• Anterior
• Overview: Bloques de construcción CSS
• Siguiente