DIW

Appearance

Box Model ​

El modelo de cajas de CSS (CSS Box Model) es un concepto fundamental que determina cómo se representan los elementos HTML y cómo se distribuye el espacio que ocupan en una página web.

En CSS, cada elemento se representa mediante una caja rectangular, formada por cuatro áreas, desde el interior hacia el exterior:

  1. Content: Área que contiene el contenido del elemento.
  2. Padding: Espacio interior entre el contenido y el borde.
  3. Border: Borde que rodea el contenido y el relleno.
  4. Margin: Espacio exterior que separa la caja de otros elementos.

CSS Box Model

Box Model en elementos de bloque y en línea

El Box Model se aplica a todos los elementos HTML, tanto de bloque (block) como en línea (inline). Sin embargo, algunas propiedades se comportan de manera diferente.

Por ejemplo, un elemento <span> puede tener padding, border y margin, pero estas propiedades no se comportan exactamente igual que en un <div>.

Además, existen elementos en línea reemplazados, como <img>, que tienen un comportamiento diferente al de otros elementos en línea.

Estudiaremos estas diferencias con más detalle en el apartado dedicado a la propiedad display.

Inspeccionar el Box Model con DevTools

Las herramientas de desarrollo del navegador permiten visualizar el modelo de cajas de cualquier elemento HTML.

Para comprobarlo:

  1. Abre una página web y pulsa F12.
  2. Selecciona un elemento HTML mediante el inspector.
  3. Localiza el diagrama del modelo de cajas en el panel de estilos calculados (Computed).
  4. Observa los valores de content, padding, border y margin.
  5. Modifica alguna propiedad CSS y comprueba cómo cambian las dimensiones.

Utiliza DevTools para inspeccionar y comprobar los ejemplos prácticos de los siguientes apartados.

1. Content ​

El contenido (content) es la parte más interna de la caja. Puede contener texto, imágenes u otros elementos HTML.

Las dimensiones del contenido dependen de las características del elemento y de las propiedades CSS que se le apliquen.

Por ejemplo:

html
<div class="box">Ejemplo de contenido</div>
css
.box {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}

En este caso se establece un ancho de 300 píxeles y un alto de 150 píxeles para el área de contenido, suponiendo el modelo de caja predeterminado (content-box).

La propiedad background-color permite visualizar el área ocupada por el elemento.

En los siguientes apartados estudiaremos cómo se calculan las dimensiones mediante box-sizing y cómo se utilizan las distintas propiedades y unidades de medida CSS.

2. padding ​

El relleno (padding) es el espacio interior comprendido entre el contenido y el borde del elemento.

Permite separar visualmente el contenido de los límites de su caja.

Podemos establecerlo individualmente para cada lado:

  • padding-top: Espacio superior.
  • padding-right: Espacio derecho.
  • padding-bottom: Espacio inferior.
  • padding-left: Espacio izquierdo.

También podemos utilizar la propiedad abreviada padding:

html
<div class="box">Ejemplo de padding</div>
css
.box {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  background-color: lightblue;
}

En este caso se aplican 20 píxeles de espacio interior en los cuatro lados.

El borde permite comprobar visualmente la separación entre el contenido y los límites de la caja.

Propiedad abreviada ​

La propiedad padding admite entre uno y cuatro valores:

css
/* Four sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Horizontal | Bottom */
padding: 10px 20px 30px;

/* Top | Right | Bottom | Left */
padding: 10px 20px 30px 40px;

Podemos aplicar sucesivamente estas cuatro variantes al elemento anterior y observar cómo cambia la distribución del espacio interior.

El relleno forma parte de la caja y su área recibe el color de fondo del elemento.

3. border ​

El borde (border) rodea el contenido y el relleno.

Podemos configurar tres características principales:

  • border-width: Grosor del borde.
  • border-style: Estilo del borde.
  • border-color: Color del borde.

La propiedad abreviada border permite establecer las tres características:

html
<div class="box">Ejemplo de border</div>
css
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  background-color: lightblue;
}

Algunos valores habituales de border-style son:

  • solid: Línea continua.
  • dashed: Línea discontinua.
  • dotted: Línea de puntos.
  • double: Línea doble.
  • none: Sin borde.

Podemos modificar el valor de border-style para comprobar visualmente las diferencias.

Bordes individuales ​

También podemos definir bordes diferentes para cada lado:

css
.box {
  width: 300px;
  padding: 20px;
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px solid green;
  border-left: none;
  background-color: lightblue;
}

En este ejemplo, cada lado tiene un borde diferente y el izquierdo no presenta ninguno.

El grosor del borde contribuye a las dimensiones totales de la caja.

4. margin ​

El margen (margin) es el espacio exterior al borde de la caja.

Se utiliza para establecer separaciones entre elementos.

Sus propiedades son:

  • margin-top: Margen superior.
  • margin-right: Margen derecho.
  • margin-bottom: Margen inferior.
  • margin-left: Margen izquierdo.

Al igual que padding, admite una propiedad abreviada.

Ejemplo ​

html
<div class="box">Primera caja</div>
<div class="box">Segunda caja</div>
css
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 20px;
  background-color: lightblue;
}

En este caso, cada caja tiene un margen exterior de 20 píxeles.

Podemos modificar los márgenes y observar cómo cambia la separación entre los elementos.

La propiedad abreviada margin admite entre uno y cuatro valores, siguiendo el mismo orden que padding.

A diferencia del relleno, el margen es transparente y no recibe el color de fondo del elemento.

Centrado horizontal con margin ​

Una aplicación habitual consiste en centrar horizontalmente un elemento de bloque con un ancho definido:

html
<div class="box">Caja centrada</div>
css
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 0 auto;
  background-color: lightblue;
}

El valor auto distribuye el espacio horizontal disponible entre los márgenes izquierdo y derecho, siempre que se cumplan las condiciones de centrado.

Podemos comprobar el resultado modificando el ancho de la ventana del navegador.

Colapso de márgenes ​

En determinadas situaciones, los márgenes verticales de dos elementos de bloque pueden colapsar, es decir, combinarse en un único margen.

Por ejemplo:

html
<div class="box1">Primera caja</div>
<div class="box2">Segunda caja</div>
css
.box1,
.box2 {
  padding: 20px;
  border: 1px solid black;
  background-color: lightblue;
}

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

En este ejemplo, los dos elementos son bloques consecutivos dentro del flujo normal.

Sus márgenes verticales colapsan y la separación resultante será de 30 píxeles, no de 50.

Podemos comprobar esta separación utilizando DevTools.

Este comportamiento se produce bajo determinadas condiciones del flujo normal. Los márgenes de los elementos flex y grid no colapsan.

5. Ejemplo práctico ​

Vamos a combinar los cuatro componentes del Box Model en un mismo elemento.

Consideremos el siguiente HTML:

html
<div class="box">Ejemplo de Box Model</div>

Y sus estilos CSS:

css
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
  background-color: lightblue;
}

En este ejemplo:

  • Content: Contiene el texto y tiene un ancho definido mediante width: 300px.
  • Padding: Separa el texto del borde mediante padding: 20px.
  • Border: Dibuja un borde negro de 5 píxeles mediante border: 5px solid black.
  • Margin: Establece una separación exterior mediante margin: 15px.
  • Background: Aplica un fondo azul claro al contenido y al relleno mediante background-color: lightblue.

Utilizando DevTools podemos inspeccionar los valores de cada componente y comprobar cómo se distribuye el espacio.

También podemos modificar individualmente width, padding, border y margin para observar su efecto sobre el elemento.

TIP

El ancho total de esta caja será superior a los 300 píxeles definidos mediante width, ya que también debemos considerar el relleno y el borde.

En el siguiente apartado estudiaremos la propiedad box-sizing y cómo se calculan las dimensiones reales de los elementos.

Recursos adicionales ​