Modelo de Caja en CSS
El navegador trata cada elemento HTML como una caja rectangular que ocupa espacio en la página. Esta caja comienza con el <body>
y se extiende a todos los elementos que contenga. Las cajas pueden estar una a continuación de otra o anidadas dentro de otras, y cada una forma parte del flujo del documento.
Estas cajas se dividen en dos tipos principales:
- Elementos de bloque: ocupan todo el ancho disponible y comienzan en una nueva lÃnea (como
<div>
,<p>
,<section>
). - Elementos en lÃnea: ocupan solo el espacio necesario y no interrumpen el flujo (como
<span>
,<a>
,<strong>
).
Cada caja tiene contenido, relleno, borde y márgenes, que puedes controlar con CSS para diseñar páginas precisas y visualmente atractivas. En esta lección exploraremos estos componentes y cómo afectan el diseño.
Partes de la caja
Todo elemento visual en HTML está compuesto por:
- Contenido: el texto o imagen que contiene el elemento.
- Padding: espacio entre el contenido y el borde.
- Border: el borde visible del elemento.
- Margin: espacio entre el borde y otros elementos.
div {
margin: 10px;
border: 2px solid black;
padding: 10px;
}
Visualización del modelo de caja
+---------------------------+
| Margin |
| +-------------------+ |
| | Border | |
| | +-----------+ | |
| | | Padding | | |
| | | +-------+ | | |
| | | |Contenido| | |
| | | +-------+ | | |
| | +-----------+ | |
| +-------------------+ |
+---------------------------+
El inspector del navegador permite ver cada parte del modelo de caja con colores distintos (normalmente azul para contenido, verde para padding, amarillo para margin).
Consejo: Usa herramientas de desarrollador (F12 o clic derecho → Inspeccionar) para entender cómo se distribuye el espacio.
Propiedad box-sizing
Controla cómo se calcula el ancho y alto total de un elemento.
content-box
(valor por defecto): el tamaño solo incluye el contenido.padding
yborder
se suman aparte.border-box
: el tamaño incluye contenido, padding y borde.
div {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
Recomendación: Usa box-sizing: border-box
para simplificar el control del ancho total de los elementos.
Aplicación global de box-sizing
*, *::before, *::after {
box-sizing: border-box;
}
Esto asegura que todos los elementos respeten border-box
, incluso pseudoelementos.
Propiedades del modelo de caja
Las propiedades margin
, padding
y border
permiten controlar los espacios internos y externos de cualquier elemento. Cada una puede aplicarse de forma general o especÃfica a cada lado: -top
, -right
, -bottom
, -left
.
Espaciado entre elementos
Padding y margin pueden definirse con una, dos, tres o cuatro unidades:
- 1 valor → todos los lados
- 2 valores → vertical | horizontal
- 3 valores → arriba | horizontal | abajo
- 4 valores → arriba | derecha | abajo | izquierda
p {
margin: 1em 2em;
padding: 0.5em 1em 0.5em 0;
}
Propiedad border
Define el borde de un elemento. Puedes controlar el grosor, estilo y color, o bien usar la forma abreviada:
div {
border: 2px solid #333;
}
También puedes controlar cada lado por separado con border-top
, border-right
, etc.
Estilos disponibles: solid
, dashed
, dotted
, double
, groove
, ridge
, inset
, outset
, none
.
Colapso de márgenes
Cuando dos márgenes verticales se encuentran (como entre párrafos), se combinan y no se suman.
<p style="margin-bottom: 1em">Uno</p>
<p style="margin-top: 2em">Dos</p>
El margen entre ambos será de 2em, no de 3em.
Altura mÃnima y máxima
Puedes usar min-height
y max-height
para evitar que los elementos se reduzcan o se expandan más de lo deseado.
div {
min-height: 100px;
max-height: 300px;
overflow: auto;
}
Buenas prácticas
Valores universales: Puedes usar initial
, inherit
y unset
con margin
, padding
, border
y box-sizing
.
initial
: valor por defecto.inherit
: hereda del contenedor padre.unset
: aplica uno u otro según corresponda.
Diseño adaptable: Usa unidades relativas como em
, rem
o %
.
Reseteo: Aplica box-sizing: border-box
global para evitar cálculos complicados.
Compatibilidad: box-sizing
y min/max-height
tienen buen soporte, incluso en navegadores antiguos.
Pruebas: Usa el inspector para verificar márgenes, bordes y espaciado real en cada elemento.