# Spacing (margin y padding)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/spacing.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Utilidades · Espaciado

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.

11

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

8

## Ocho breakpoints
Todas las familias admiten variantes desde 640px hasta 6016px.

i

## La escala usa píxeles
El sufijo coincide con el valor del token: `.p-24` aplica `var(--q-units-24)`, cuyo valor actual es 24px.

Código + resultado

## Compara espacio exterior e interior

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

HTML

Resultado aplicado  Interior · 24px

Área violeta = espacio aplicado

Contenido

.p-24 aplica 24px en los cuatro lados; las franjas violetas señalan toda el área de padding.

```html
<div class="p-24">Contenido</div>
```

.m-24 aplica 24px exteriores en los cuatro lados; las franjas violetas muestran el margen real alrededor del elemento.

```html
<div class="m-24">Contenido</div>
```

.px-32 aplica exactamente 32px a izquierda y derecha; las franjas violetas señalan ambas zonas de padding.

```html
<div class="px-32">Contenido</div>
```

.mt-32 aplica 32px únicamente sobre el elemento; la franja violeta muestra ese margen superior.

```html
<div class="mt-32">Contenido</div>
```

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

```html
<div class="p-8 p-768-16 p-1280-32">Contenido</div>
```

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

Elemento

### Margin

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

Ejemplo: `.m-24`

`.p-{valor}` Interior

Contenido

### Padding

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

Ejemplo: `.p-24`

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

`.mx-* / .px-*` Eje horizontal  Aplica el valor a izquierda y derecha.

`.my-* / .py-*` Eje vertical  Aplica el valor arriba y abajo.

`.*t / .*r / .*b / .*l` Lado individual  Controla 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 exterior  La zona violeta queda fuera del borde del elemento.
`margin`

Elemento

`.m-0` 0px

Elemento

`.m-4` 4px

Elemento

`.m-8` 8px

Elemento

`.m-12` 12px

Elemento

`.m-16` 16px

Elemento

`.m-24` 24px

Elemento

`.m-32` 32px

Elemento

`.m-40` 40px

Elemento

`.m-48` 48px

Elemento

`.m-64` 64px

Elemento

`.m-96` 96px

Espacio interior  La zona violeta queda entre el contenido y el borde del elemento.
`padding`

Contenido

`.p-0` 0px

Contenido

`.p-4` 4px

Contenido

`.p-8` 8px

Contenido

`.p-12` 12px

Contenido

`.p-16` 16px

Contenido

`.p-24` 24px

Contenido

`.p-32` 32px

Contenido

`.p-40` 40px

Contenido

`.p-48` 48px

Contenido

`.p-64` 64px

Contenido

`.p-96` 96px

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`.

`640` min-width  .p-640-24

`768` min-width  .p-768-24

`1024` min-width  .p-1024-24

`1280` min-width  .p-1280-24

`1536` min-width  .p-1536-24

`2560` min-width  .p-2560-24

`3840` min-width  .p-3840-24

`6016` min-width  .p-6016-24

HTML

```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 |

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

Recomendaciones

## Buenas prácticas de spacing

01
### Usa la escala
Elige el valor disponible más cercano en lugar de introducir medidas arbitrarias.

02
### Margin para el exterior
Separa componentes entre sí con margin; evita usarlo para crear aire dentro de una caja.

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

04
### Gap entre hermanos
Cuando varios hijos comparten un contenedor flex o grid, usa gap para separarlos uniformemente.