Dominar el modelo de caja CSS

Cada elemento HTML se trata como una caja rectangular.

Los encabezados, párrafos, botones, imágenes y tarjetas siguen esta misma idea. Si entiendes cómo funcionan estas cajas, controlar el espaciado y el diseño se vuelve mucho más fácil.

El modelo de caja CSS explica cómo encajan el contenido, el padding, los bordes y los márgenes.

Qué es el modelo de caja CSS

El modelo de caja CSS es el conjunto de reglas que controla cómo se mide y se separa un elemento.

Piensa en una foto enmarcada:

• La foto es el contenido.
• El espacio alrededor de la foto es el padding.
• El marco es el borde.
• El espacio vacío de la pared alrededor del marco es el margen.

Cuando un diseño se ve extraño, el modelo de caja suele ser el primer lugar que conviene revisar.

Área de contenido

El área de contenido es la parte interior de la caja.

Aquí viven el texto, las imágenes o los elementos hijos.

<p class="bio-text">Hola, mi nombre es Alex.</p>

<style>
  .bio-text {
    width: 200px;
    background-color: yellow;
  }
</style>

El contenido del párrafo queda limitado a 200px de ancho.

Usa width cuando quieras que texto o medios encajen dentro de un espacio específico.

Ten cuidado con alturas fijas en texto. Si el texto pasa a más líneas, puede salirse de la caja.

Padding

El padding es espacio dentro de la caja.

Está entre el contenido y el borde. El fondo del elemento se muestra a través del padding por defecto.

<div class="alert-box">Advertencia: ¡guarda tu trabajo!</div>

<style>
  .alert-box {
    background-color: yellow;
    padding: 20px;
  }
</style>

Ahora el texto tiene espacio para respirar dentro de la caja amarilla.

Usa padding en botones, tarjetas, alertas y cualquier elemento donde el contenido no debe tocar el borde.

Puedes definir padding en un solo lado con propiedades como padding-top, padding-right, padding-bottom y padding-left.

Borde

El borde es la línea alrededor del padding y el contenido.

Puedes controlar su ancho, estilo y color.

<div class="avatar">A</div>

<style>
  .avatar {
    width: 64px;
    height: 64px;
    border: 4px solid black;
  }
</style>

El borde enmarca el elemento.

Usa bordes para separar secciones, marcar tarjetas o crear límites visuales claros.

Si el ancho del borde es 0, el borde no aparece y no ocupa espacio en el diseño.

Margen

El margen es espacio fuera del borde.

Empuja otros elementos. Los márgenes son transparentes, así que ves el fondo del padre o de la página a través de ellos.

<button class="primary-button">Enviar</button>
<button>Cancelar</button>

<style>
  .primary-button {
    margin-right: 15px;
  }
</style>

El primer botón empuja el segundo botón.

Usa márgenes para crear espacios entre elementos, como párrafos, botones, tarjetas y secciones.

Padding vs margen

Padding y margen crean espacio, pero lo hacen en lugares diferentes.

El padding crea espacio dentro del elemento. El margen crea espacio fuera del elemento.

<div class="box padded-box">Uso padding.</div>
<div class="box margin-box">Uso margen.</div>

<style>
  .box {
    background-color: lightblue;
    border: 2px solid darkblue;
  }

  .padded-box {
    padding: 30px;
  }

  .margin-box {
    margin-top: 30px;
  }
</style>

El padding hace más grande el área azul. El margen crea un espacio fuera de la segunda caja.

Usa padding cuando el interior del elemento necesita más espacio. Usa margen cuando necesitas más espacio entre elementos.

Cómo se calcula el tamaño total de un elemento

Por defecto, CSS usa el tamaño content-box.

Eso significa que width controla solo el área de contenido. El padding y los bordes se añaden encima.

<div class="sidebar">Menú</div>

<style>
  .sidebar {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightgray;
  }
</style>

El ancho visible total es:

200px contenido
+ 40px padding izquierdo y derecho
+ 10px borde izquierdo y derecho
= 250px total

Esto explica por qué un elemento puede verse más ancho que el width que escribiste.

Los márgenes están fuera del borde. No forman parte del tamaño visible de la caja, pero sí afectan cuánto espacio ocupa el elemento en el diseño.

Qué hace box-sizing

box-sizing cambia cómo el navegador calcula width y height.

Te permite decidir si el padding y los bordes se suman fuera del ancho o se incluyen dentro de él.

<input type="text" class="text-field" placeholder="Tu nombre" />

<style>
  .text-field {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

El input permanece dentro de su contenedor incluso con padding.

box-sizing no incluye el margen. Los márgenes siempre quedan fuera de la caja.

content-box vs border-box

content-box es el valor predeterminado. El padding y los bordes se añaden fuera del ancho.

border-box incluye el padding y los bordes dentro del ancho que defines.

<div class="card content-box-card">content-box</div>
<div class="card border-box-card">border-box</div>

<style>
  .card {
    width: 300px;
    padding: 30px;
    border: 5px solid red;
    background-color: pink;
    margin-bottom: 20px;
  }

  .content-box-card {
    box-sizing: content-box;
  }

  .border-box-card {
    box-sizing: border-box;
  }
</style>

La tarjeta content-box se vuelve más ancha que 300px.

La tarjeta border-box permanece exactamente en 300px de ancho.

Usa border-box cuando quieras que las reglas de ancho sean más fáciles de predecir.

Por qué muchos desarrolladores usan box-sizing: border-box

border-box simplifica los cálculos de diseño.

Si defines un elemento con width: 50%, puede mantener ese ancho incluso después de añadir padding y bordes.

Muchos proyectos añaden esta regla cerca del inicio del archivo CSS:

Esto hace que el tamaño sea más predecible en toda la página.

Ten cuidado al añadir esto a un proyecto antiguo. Algunos diseños existentes pueden haberse construido pensando en el comportamiento predeterminado content-box.

Colapso de márgenes

El colapso de márgenes ocurre cuando los márgenes verticales se tocan.

En lugar de sumarse, el navegador usa el margen más grande.

<h2 class="title">Mi título</h2>
<p class="text">El texto de mi párrafo.</p>

<style>
  .title {
    margin-bottom: 30px;
  }

  .text {
    margin-top: 10px;
  }
</style>

El espacio entre el encabezado y el párrafo es 30px, no 40px.

El colapso de márgenes solo afecta márgenes verticales en el flujo normal del documento. Los márgenes izquierdo y derecho no colapsan.

Este comportamiento suele ayudar a que las páginas de texto mantengan un espaciado estable entre encabezados y párrafos.

Errores comunes de principiantes

• Olvidar que los navegadores añaden márgenes predeterminados a elementos como body, encabezados y párrafos.
• Usar padding cuando en realidad quieres espacio entre dos elementos separados.
• Usar margen cuando quieres que crezca el color de fondo del elemento.
• Olvidar que el tamaño predeterminado content-box añade padding y bordes fuera del ancho.
• Esperar que los márgenes horizontales colapsen. Solo los márgenes verticales pueden colapsar.

Mini tarea

Mira esta regla CSS:

¿Qué ancho visible total ocupará esta caja en la pantalla?

Respuesta: 520px.

Eso es 400px de ancho de contenido, más 50px de padding izquierdo, 50px de padding derecho, 10px de borde izquierdo y 10px de borde derecho.

Quiz corto

Pregunta 1: ¿Qué capa es transparente y deja ver el fondo detrás del elemento: padding o margen?

Respuesta: Margen.

Pregunta 2: Si dos párrafos están apilados verticalmente y ambos márgenes que se tocan son de 20px, ¿cuál es el espacio entre ellos?

Respuesta: 20px, porque los márgenes verticales colapsan.

Pregunta 3: ¿Qué valor de box-sizing incluye padding y bordes dentro del ancho que defines?

Respuesta: border-box.

Pequeño reto

Intenta estilizar esta tarjeta de perfil y el espaciado del texto:

• Da a .card un ancho de 250px, un borde sólido, padding y box-sizing: border-box.
• Da a .first-paragraph un margen inferior de 40px.
• Da a .second-paragraph un margen superior de 20px.
• Observa que el espacio entre los párrafos es 40px, no 60px.

<div class="card">
  <h3>Perfil de usuario</h3>
  <p class="first-paragraph">Información básica del perfil.</p>
  <p class="second-paragraph">Más detalles abajo.</p>
</div>

<style>
  .card {
    /* Añade ancho, borde, padding y border-box */
  }

  .first-paragraph {
    /* Añade un margen inferior de 40px */
  }

  .second-paragraph {
    /* Añade un margen superior de 20px */
  }
</style>

Una posible respuesta:

Resumen

• El modelo de caja CSS rodea cada elemento con contenido, padding, borde y margen.
• El contenido es donde viven texto, imágenes y elementos hijos.
• El padding crea espacio dentro de la caja.
• Los bordes enmarcan la caja fuera del padding.
• Los márgenes crean espacio transparente fuera del borde.
• El modelo predeterminado content-box añade padding y bordes fuera del ancho definido.
• box-sizing: border-box incluye padding y bordes dentro del ancho definido.
• Los márgenes verticales pueden colapsar en un solo margen más grande en lugar de sumarse.