> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Controla el espaciado con margin y padding

> Ajusta el margin y el padding para controlar el espaciado, mejorar la legibilidad y crear landing pages limpias y bien estructuradas.

La sección Spacing controla el **espacio alrededor y dentro de los elementos**. Así consigues diseños limpios y una separación adecuada entre los contenidos.

La encontrarás en el **panel derecho** al seleccionar cualquier elemento.

***

## Dónde encontrarlo

1. Selecciona un elemento en el lienzo
2. Abre el **panel derecho**
3. Baja hasta la sección **Spacing**

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/spacing.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2de2e4ae08c84d93f1d5f5ca557c81cd" alt="Spacing" width="1306" height="988" data-path="images/spacing.png" />
</Frame>

***

## Margin frente a padding

### Margin (espacio exterior)

* Controla el espacio **fuera** del elemento
* Separa el elemento de los demás

### Padding (espacio interior)

* Controla el espacio **dentro** del elemento
* Añade espacio entre el contenido y los bordes del elemento

***

## Cómo ajustar el espaciado

Puedes controlar el espaciado de cada lado:

* Arriba
* Abajo
* Izquierda
* Derecha

Cada lado se ajusta de forma independiente.

***

## Controles rápidos

### Botones + / –

* Aumentan o reducen el espaciado en **pasos de 5px**
* Una forma rápida de afinar el diseño

### Entrada manual

* Haz clic en un valor para escribir un número personalizado
* También puedes elegir entre valores predefinidos como:
  * 0
  * 10
  * 20
  * 40
  * 60
  * 100
  * 140

### Opción Auto

* Deja que el sistema gestione el espaciado automáticamente (se usa sobre todo para la alineación)

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/Screenshot2026-03-25at10.25.43AM.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2b3771da97501a466738d7952afc4702" alt="Screenshot 2026 03 25 At 10 25 43 AM" width="342" height="350" data-path="images/Screenshot2026-03-25at10.25.43AM.png" />
</Frame>

***

## Cómo funciona (ejemplo)

* Margin Top → `20px`<br />👉 Añade espacio por encima del elemento
* Padding Left → `10px`<br />👉 Separa el contenido interior del borde izquierdo

***

## Buenas prácticas

* Usa el **margin** para separar elementos
* Usa el **padding** para mejorar la legibilidad dentro de los elementos
* Evita el exceso de espaciado: mantén el diseño equilibrado
* Usa + / – para ajustes rápidos en lugar de adivinar valores