Modelo de caja en CSS: width, height, margin, padding, border y box-sizing

Después de aprender a seleccionar elementos con CSS, el siguiente concepto fundamental es entender cómo ocupa espacio cada elemento dentro de una página.

CSS representa cada elemento como una caja. Esa caja está formada por contenido, espacio interior, borde y espacio exterior.

¿Qué es el modelo de caja?

El modelo de caja —o box model— describe cómo se calcula el tamaño y el espacio que ocupa un elemento HTML.

margin
└── border
    └── padding
        └── contenido

Las cuatro partes principales son:

• content: el contenido del elemento;
• padding: espacio interior entre contenido y borde;
• border: borde que rodea el elemento;
• margin: espacio exterior que separa el elemento de otros.

Un ejemplo simple

<div class="tarjeta">
    Curso de CSS
</div>

CSS:

.tarjeta {
    width: 300px;
    padding: 20px;
    border: 2px solid #007bff;
    margin: 30px;
}

width

La propiedad width define el ancho.

.tarjeta {
    width: 300px;
}

Sin embargo, el ancho final puede depender de padding, border y de la propiedad box-sizing.

height

height define la altura.

.caja {
    height: 200px;
}

En muchos casos conviene permitir que la altura se adapte automáticamente al contenido en lugar de fijarla.

padding: espacio interior

El padding crea espacio entre el contenido y el borde.

.tarjeta {
    padding: 20px;
}

También podemos definir cada lado por separado:

.tarjeta {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Forma abreviada de padding

Con un valor:

.tarjeta {
    padding: 20px;
}

Aplica 20 píxeles a los cuatro lados.

Con dos valores:

.tarjeta {
    padding: 10px 20px;
}

El primero corresponde arriba y abajo; el segundo, izquierda y derecha.

Con cuatro valores:

.tarjeta {
    padding: 10px 20px 30px 40px;
}

El orden es:

arriba → derecha → abajo → izquierda

margin: espacio exterior

margin controla el espacio alrededor del elemento.

.tarjeta {
    margin: 20px;
}

También existe:

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

Margin automático

Una técnica clásica para centrar horizontalmente un elemento con ancho definido es:

.contenedor {
    width: 800px;
    margin: 0 auto;
}

auto distribuye automáticamente el espacio horizontal disponible.

border

El borde rodea el contenido y el padding.

.tarjeta {
    border: 1px solid #cccccc;
}

Esta propiedad combina:

• grosor;
• tipo de línea;
• color.

También podemos escribirlas por separado:

.tarjeta {
    border-width: 2px;
    border-style: solid;
    border-color: #007bff;
}

border-radius

Permite redondear las esquinas.

.tarjeta {
    border-radius: 12px;
}

¿Cuánto mide realmente una caja?

Supongamos esta regla:

.caja {
    width: 300px;
    padding: 20px;
    border: 5px solid #000;
}

Con el comportamiento tradicional de CSS, width: 300px representa solamente el contenido.

El ancho real será:

300px contenido
+ 40px padding
+ 10px border
= 350px

content-box

El valor por defecto de box-sizing suele ser content-box.

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

En este modo, width y height se aplican al contenido y luego se agregan padding y borde.

border-box

Con border-box, el ancho declarado incluye contenido, padding y borde.

.caja {
    width: 300px;
    padding: 20px;
    border: 5px solid #000;
    box-sizing: border-box;
}

En este caso, la caja completa mantiene un ancho total de 300px.

¿Por qué se usa tanto border-box?

Porque vuelve mucho más predecible el cálculo de tamaños.

Por eso es muy habitual comenzar una hoja de estilos con:

* {
    box-sizing: border-box;
}

Una versión aún más completa es:

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

Ejemplo práctico con tarjetas

HTML:

<section class="cursos">

    <article class="tarjeta">
        <h2>HTML</h2>
        <p>Estructura de páginas web.</p>
    </article>

    <article class="tarjeta">
        <h2>CSS</h2>
        <p>Estilos y diseño visual.</p>
    </article>

</section>

CSS:

* {
    box-sizing: border-box;
}

.tarjeta {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #cccccc;
    border-radius: 10px;
}

Margin y padding no son lo mismo

Una forma simple de recordarlo:

padding = espacio dentro de la caja
margin  = espacio fuera de la caja

Si queremos separar el texto del borde, usamos padding.

Si queremos separar una tarjeta de otra, usamos margin.

Width en porcentaje

También podemos trabajar con medidas relativas.

.tarjeta {
    width: 80%;
}

En este caso, el ancho depende del elemento contenedor.

max-width

Una propiedad muy útil es max-width.

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

Así el elemento puede adaptarse a pantallas pequeñas sin crecer indefinidamente en pantallas grandes.

min-width y min-height

También podemos establecer tamaños mínimos.

.tarjeta {
    min-width: 250px;
    min-height: 150px;
}

Overflow

¿Qué pasa si el contenido no entra en una caja con tamaño limitado?

CSS ofrece la propiedad overflow.

.caja {
    height: 100px;
    overflow: auto;
}

Con auto, el navegador puede agregar barras de desplazamiento cuando sean necesarias.

Errores comunes

• confundir margin con padding;
• olvidar que el borde también ocupa espacio;
• no tener en cuenta box-sizing;
• fijar alturas innecesariamente;
• usar anchos rígidos demasiado grandes;
• no considerar cómo se verá una caja en pantallas pequeñas;
• usar muchos márgenes para resolver problemas que deberían tratarse con layout.

Ejercicio para practicar

Partiendo de este HTML:

<article class="perfil">

    <h2>Ana López</h2>

    <p>
        Estudiante de desarrollo web.
    </p>

</article>

Creá una regla CSS que:

• tenga un ancho de 350px;
• use border-box;
• agregue 25px de padding;
• tenga un borde azul;
• redondee las esquinas;
• agregue margen exterior;
• y luego compará qué ocurre si cambiás border-box por content-box.

Qué aprendimos

• modelo de caja;
• contenido;
• width y height;
• padding;
• margin;
• border;
• border-radius;
• content-box;
• border-box;
• max-width y tamaños mínimos;
• overflow.

Seguí aprendiendo CSS

La guía anterior es:

Selectores CSS: etiquetas, clases, ID, descendientes y combinadores

El próximo paso es trabajar con tipografías, colores, fondos y unidades CSS para empezar a controlar con más precisión la identidad visual de nuestras páginas:

Tipografías, colores, fondos y unidades CSS: guía práctica →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal