Utilidades · Espaciado

Spacing (margin y padding)

Controla el espacio exterior e interior mediante una escala compartida de once valores en píxeles.

v2.0

Dos contextos

.m-* separa el elemento de su entorno y .p-* separa el contenido de su borde.

Escala compartida

Once valores desde 0px hasta 96px mantienen el mismo ritmo en margin y padding.

Ocho breakpoints

Todas las familias admiten variantes desde 640px hasta 6016px.

Código + resultado

Compara espacio exterior e interior

Cada opción aplica clases reales sobre el mismo elemento para mostrar qué zona modifica.

Área violeta = espacio aplicado

Contenido

Familias y direcciones

Elige primero el contexto y después el eje

Margin controla el exterior; padding controla el interior. Ambas familias ofrecen todos los lados, ejes y lados individuales.

.m-{valor}Exterior

Margin

Separa el borde del elemento respecto de los elementos o límites que lo rodean.

Ejemplo: .m-24

.p-{valor}Interior

Padding

Separa el contenido del borde del propio elemento y aumenta su caja visible.

Ejemplo: .p-24

.m-* / .p-*Todos los ladosAplica el mismo valor arriba, derecha, abajo e izquierda.

.mx-* / .px-*Eje horizontalAplica el valor a izquierda y derecha.

.my-* / .py-*Eje verticalAplica el valor arriba y abajo.

.*t / .*r / .*b / .*lLado individualControla top, right, bottom o left por separado.

Escala

Once valores aplicados

Cambia de pestaña para observar la misma escala como separación exterior o interior.

Espacio exteriorLa zona violeta queda fuera del borde del elemento.

margin

.m-00px

.m-44px

.m-88px

.m-1212px

.m-1616px

.m-2424px

.m-3232px

.m-4040px

.m-4848px

.m-6464px

.m-9696px

Espacio interiorLa zona violeta queda entre el contenido y el borde del elemento.

padding

.p-00px

.p-44px

.p-88px

.p-1212px

.p-1616px

.p-2424px

.p-3232px

.p-4040px

.p-4848px

.p-6464px

.p-9696px

Variantes responsivas

Ocho puntos de activación

Inserta el breakpoint entre la dirección y el valor: .p-768-16, .mx-1024-24 o .pt-1280-32.

640min-width.p-640-24

768min-width.p-768-24

1024min-width.p-1024-24

1280min-width.p-1280-24

1536min-width.p-1536-24

2560min-width.p-2560-24

3840min-width.p-3840-24

6016min-width.p-6016-24

HTML

<article class="p-8 p-768-16 p-1280-32">
  Contenido adaptable
</article>

El padding comienza en 8px, pasa a 16px desde 768px y a 32px desde 1280px.

Referencia

Clases disponibles

Todas las familias aceptan los valores 0, 4, 8, 12, 16, 24, 32, 40, 48, 64 y 96.

Clases	Propiedad	Dirección	Ejemplo
`.m-{valor}`	`margin`	Cuatro lados.	`.m-16`
`.mx-{valor}` / `.my-{valor}`	`margin-*`	Eje horizontal o vertical.	`.mx-24`
`.mt\|mr\|mb\|ml-{valor}`	`margin-*`	Un lado específico.	`.mt-32`
`.p-{valor}`	`padding`	Cuatro lados.	`.p-16`
`.px-{valor}` / `.py-{valor}`	`padding-*`	Eje horizontal o vertical.	`.py-24`
`.pt\|pr\|pb\|pl-{valor}`	`padding-*`	Un lado específico.	`.pl-32`
`.{familia}-{bp}-{valor}`	La propiedad de la familia	Desde el breakpoint indicado.	`.px-1024-32`

ResponsiveLas variantes se activan en 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016 píxeles.

Recomendaciones

Buenas prácticas de spacing

Usa la escala

Elige el valor disponible más cercano en lugar de introducir medidas arbitrarias.

Margin para el exterior

Separa componentes entre sí con margin; evita usarlo para crear aire dentro de una caja.

Padding para el interior

Usa padding para proteger el contenido y ampliar el área visual o interactiva del componente.

Gap entre hermanos

Cuando varios hijos comparten un contenedor flex o grid, usa gap para separarlos uniformemente.