Lección 6: El modelo de caja y Box-sizing

Introducción al modelo de caja

El modelo de caja es un concepto fundamental en CSS que describe cómo se representa cada elemento HTML como una caja rectangular. Esta caja consiste en el contenido, el padding, el borde y el margen.

Componentes del modelo de caja

Content / Contenido: El área donde se muestra el contenido real del elemento (texto, imágenes, etc.).
Padding / Relleno: El espacio entre el contenido y el borde.
Border / Borde: Una línea que rodea el padding y el contenido.
Margin / Margen: El espacio fuera del borde, que separa el elemento de otros elementos.

Propiedades CSS relacionadas

CSS


.elemento {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Box-sizing

La propiedad box-sizing controla cómo se calcula el tamaño total de un elemento.

content-box (valor por defecto)

El ancho y alto especificados solo afectan al contenido. El padding y el borde se añaden al tamaño total.

CSS


.content-box {
    box-sizing: content-box;
    width: 100px;
    padding: 20px;
    border: 5px solid black;
}
/* Ancho total: 100px + 40px (padding) + 10px (borde) = 150px */

border-box

El ancho y alto especificados incluyen el contenido, el padding y el borde.

CSS


.border-box {
    box-sizing: border-box;
    width: 100px;
    padding: 20px;
    border: 5px solid black;
}
/* Ancho total: 100px (incluyendo padding y borde) */

Ejercicio práctico

Crea dos divs con el mismo ancho y alto declarados, pero uno con box-sizing: content-box y otro con border-box. Añade padding y borde a ambos y observa la diferencia en sus tamaños finales.