Curso de CSS / modelo de caja: contenido, relleno, borde y margen

El modelo de caja de CSS describe el área de contenido de un elemento, el relleno, el borde y el margen exterior. Estas áreas afectan sus dimensiones visibles y el espaciado, mientras que los márgenes verticales adyacentes de bloque pueden colapsar bajo condiciones particulares.

Identifica las cuatro áreas de la caja

La imagen de abajo muestra las ubicaciones de las cuatro áreas. Se coloca texto o imágenes dentro del contenido azul, y un relleno amarillo y un borde verde rodean el exterior. El margen naranja está fuera del borde. El color de la imagen sirve para distinguir el área, y el color de fondo del elemento no se pinta en el propio margen.

Cuando especificas un fondo, por defecto se pinta en el contenido y el relleno, y puede verse detrás de un borde transparente. El fondo del elemento no se dibuja en el área del margen. Por lo tanto, para expandir el área coloreada de la tarjeta, necesitas aumentar el relleno, no el margen. Qué tan lejos se dibuja el fondo se puede cambiar con una propiedad separada, pero aquí se usa el comportamiento predeterminado.

Calcula la anchura declarada y la anchura exterior

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Para un elemento regular content-box, width: 200px mide el contenido. Agregar 20px de relleno y 2px de borde en ambos lados produce un cuadro de borde de 244px. Los márgenes de 16px están fuera de él, haciendo que el espacio horizontal incluyendo ambos márgenes sea de 276px. Los márgenes verticales pueden colapsar, por lo que no se debe aplicar esta suma simple en cada caso vertical. Para más detalles, ver CSS Ancho, Altura, límites min/máx, y box-sizing.

Usa box-sizing: border-box para incluir el relleno y el borde en el ancho declarado. Cambiar solo esa propiedad en este ejemplo da un cuadro de borde de 200px y un área de contenido de 156px. La diferencia se debe a qué áreas incluye box-sizing en la anchura declarada. Ver MDN: Introducción.

Lee las abreviaturas de uno a cuatro valores

Los valores de margen también se especifican en el mismo orden. Si el valor es dos, es arriba y abajo, izquierda y derecha; si es tres, es arriba, izquierda y derecha, abajo; y si es cuatro, es en el sentido de las agujas del reloj desde arriba. Si solo quieres cambiar algunas direcciones, usa propiedades individuales como padding-top. Si más tarde vuelves a escribir propiedades abreviadas, los valores individuales especificados anteriormente también pueden cambiar, así que comprueba el orden de aplicación.

padding-inline y margin-block son propiedades lógicas basadas en la dirección de escritura del texto. En general, en la escritura horizontal de izquierda a derecha, inline corresponde a izquierda y derecha, y block corresponde a arriba y abajo, pero en la escritura vertical, la dirección física es diferente. Esto no significa siempre una dirección horizontal o vertical fija. Puedes verificar la correspondencia de direcciones en la descripción de margin-block de MDN.

Comprende el colapso de márgenes verticales

Los márgenes verticales adyacentes en un flujo de bloque normal se combinan condicionalmente en un solo espacio. Esto se llama colapso de márgenes. Los márgenes positivos, donde el margen inferior del elemento anterior es de 20px y el margen superior del siguiente elemento es de 30px, pueden producir un solo espacio de 30px, el mayor de ambos, en lugar de sumar 50px.

El colapso no combina márgenes horizontales ni ningún padding, y los márgenes de los elementos Flexbox y Grid no colapsan como los márgenes de bloques en flujo normal. Los márgenes de padre a hijo y los márgenes negativos introducen otras condiciones. Este ejercicio compara deliberadamente solo los márgenes verticales positivos entre dos bloques hermanos. Ver MDN: Colapso de márgenes.

Ejecuta el ejemplo y mide cada área

Guarda el código siguiente como box-model.html en UTF-8 y ábrelo. La primera tarjeta revisa las cuatro áreas, y las dos filas dentro del cuadro punteado son para observar el colapso vertical de margen. El último cuadro muestra el padding para tres valores.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. En Herramientas de Desarrollador, en Elements, selecciona la .card y busca la visualización del modelo de caja en Styles o Computed. Asegúrate de que el contenido sea de 200px, el padding a la izquierda y derecha sea de 20px, el borde sea de 2px y el margen de 16px.
2. Cambia solo el padding a 30px. El contenido permanecerá en 200px y el ancho hasta el borde será de 264px. Si lo devuelves a los 20px originales y cambias el margen a 32px, el ancho de la tarjeta en sí permanecerá en 244px y el espacio circundante cambiará.
3. Mira entre las dos filas dentro del cuadro punteado. Los márgenes verticales positivos de 20px y 30px se combinan, resultando en un espacio de 30px. Si cambias el margen inferior de la primera fila a 40px, el espacio se convierte en 40px. Después de comparar, vuelve a 20px.
4. Verifica que el relleno inferior de .three-values sea de 30px, el superior de 10px, y el izquierdo y derecho de 20px. Si eliminas los últimos 30px para dejar solo dos valores, el inferior también se convierte en 10px.

El espaciado que difiere del esperado puede ocurrir debido al margen predeterminado p·h1 del navegador, selectores de mayor especificidad o colapso de márgenes. Primero, verifica cuál es el margen de qué elemento y cámbialo un valor a la vez. Los cambios temporales en las herramientas de desarrollo desaparecen al actualizar, y los cambios que guardes en los archivos deben revertirse manualmente a sus valores originales.