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

# Controle o espaçamento com margin e padding

> Ajuste margin e padding para controlar o espaçamento, melhorar a legibilidade e criar layouts de landing page limpos e bem estruturados.

A seção Spacing controla o **espaço em volta e dentro dos elementos**. Isso ajuda a criar layouts limpos, com a separação certa entre os conteúdos.

Você encontra essa seção no **painel da direita** ao selecionar qualquer elemento.

***

## Onde encontrar

1. Selecione um elemento na tela
2. Abra o **painel da direita**
3. Role até a seção **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 x padding

### Margin (espaço externo)

* Controla o espaço **fora** do elemento
* Afasta o elemento dos outros elementos

### Padding (espaço interno)

* Controla o espaço **dentro** do elemento
* Adiciona espaço entre o conteúdo e as bordas do elemento

***

## Como ajustar o espaçamento

Você pode controlar o espaçamento de cada lado:

* Topo
* Base
* Esquerda
* Direita

Cada lado pode ser ajustado de forma independente.

***

## Controles rápidos

### Botões + / –

* Aumentam ou diminuem o espaçamento em **passos de 5px**
* Forma rápida de fazer ajustes finos no layout

### Digitação manual

* Clique em um valor para digitar um número personalizado
* Você também pode escolher entre valores prontos, como:
  * 0
  * 10
  * 20
  * 40
  * 60
  * 100
  * 140

### Opção Auto

* Deixa o sistema gerenciar o espaçamento automaticamente (usado principalmente para alinhamento)

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

***

## Como funciona (exemplo)

* Margin Top → `20px`<br />👉 adiciona espaço acima do elemento
* Padding Left → `10px`<br />👉 afasta o conteúdo interno da borda esquerda

***

## Boas práticas

* Use **margin** para separar elementos
* Use **padding** para melhorar a legibilidade dentro dos elementos
* Evite espaçamento demais: mantenha os layouts equilibrados
* Use + / – para ajustes rápidos em vez de chutar valores