Controle o espaçamento com margin e padding

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

---

​

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)

---

​

Como funciona (exemplo)

• Margin Top → 20px
  👉 adiciona espaço acima do elemento
• Padding Left → 10px
  👉 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