Estilos Espaciado

Espaciado

El espaciado ordena la interfaz: agrupa lo relacionado y separa lo que no lo está. Material usa una retícula de 4 dp y define márgenes y paneles según el ancho de la ventana.

Ancho de la ventana: 390 dp · Compacta

Retícula de 4 dp

Todas las medidas son múltiplos de 4: 4, 8, 12, 16, 24, 32, 48. Así los elementos se alinean solos y el diseño se ve ordenado aunque no se note por qué.

Ana GómezEntregó el taller 3

Ver

Mostrar retícula

Clases de tamaño de ventana

En lugar de diseñar para "celular" o "computador", Material diseña para anchos de ventana. Mueve el control de arriba y observa cómo cambia la navegación y el número de paneles.

Clase	Ancho (dp)	Margen	Paneles	Navegación	Ejemplos
Compacta	< 600	16 dp	1	Barra de navegación inferior	Celular vertical
Mediana	600 – 839	24 dp	1 (o 2)	Riel de navegación	Tablet vertical, plegable abierto
Expandida	840 – 1199	24 dp	2	Riel o cajón de navegación	Tablet horizontal, escritorio pequeño
Grande	1200 – 1599	24 dp	2	Cajón de navegación	Escritorio
Extra grande	≥ 1600	24 dp	2 o 3	Cajón de navegación	Monitores grandes

Márgenes, paneles y separadores

Panel 1

Panel 2

Margen: espacio entre el borde de la ventana y el contenido (16 o 24 dp).
Panel: zona de contenido; con dos paneles, uno suele ser lista y el otro detalle.
Separador: espacio entre paneles (24 dp).

Densidad

Las interfaces con mucha información (tablas, paneles de administración) pueden reducir el espacio en pasos de 4 dp. Nunca hasta dejar áreas táctiles menores a 48 dp en pantallas táctiles.

Normal (0)

Densa (-2)

Muy densa (-4)

En CSS

:root { --space: 4px; }

.tarjeta {
  padding: calc(var(--space) * 4);   /* 16px */
  gap: calc(var(--space) * 2);       /* 8px  */
}

/* Clases de ventana con media queries */
.layout { display: grid; padding: 0 16px; }
@media (min-width: 600px) { .layout { padding: 0 24px; } }
@media (min-width: 840px) {
  .layout { grid-template-columns: 360px 1fr; gap: 24px; } /* lista + detalle */
}