Espaciado

Sistema de espaciado basado en múltiplos de 4px para consistencia visual.

Escala

1
0.25rem4px
2
0.5rem8px
3
0.75rem12px
4
1rem16px
5
1.25rem20px
6
1.5rem24px
8
2rem32px
10
2.5rem40px
12
3rem48px
16
4rem64px
20
5rem80px
24
6rem96px
32
8rem128px

Uso en Tailwind

Tailwind CSS mapea estos valores directamente. Usa las clases estándar:

{/* Padding */}
<div className="p-4">       {/* 1rem = 16px */}
<div className="px-6 py-3"> {/* 1.5rem x, 0.75rem y */}

{/* Margin */}
<div className="mt-8">      {/* 2rem = 32px */}
<div className="mb-16">     {/* 4rem = 64px */}

{/* Gap */}
<div className="flex gap-4"> {/* 1rem entre items */}
<div className="grid gap-8"> {/* 2rem entre celdas */}

Reglas de uso

  • • Secciones: 16-24 (4rem-6rem) de separación vertical
  • • Cards y contenedores: 6-8 (1.5rem-2rem) de padding
  • • Elementos inline: 2-4 (0.5rem-1rem) de gap
  • • Texto: 1-2 (0.25rem-0.5rem) entre label y campo

Ejemplos visuales

Card con p-6 (24px)

24px24px

Flex con gap-4 (16px) entre elementos

Item 1
← 16px →
Item 2
← 16px →
Item 3

Espaciado entre secciones (py-24 = 96px)

py-24 (96px)