Estilo do bloco: espaço em cima e embaixo, preenchimento (padding) e margem
Controle o respiro entre as seções com Espaço (Nenhum a Grande) e, para ajuste fino, o preenchimento e a margem em pixels nos 4 lados.
Neste artigo
O "respiro" entre as seções é o que faz um site parecer profissional ou apertado. A aba Estilo de cada bloco tem três controles para isso: Espaço em cima e embaixo (rápido), e o grupo Espaçamento (px) com Preenchimento (padding) e Margem (margin) (ajuste fino).
- Selecione um bloco livre e abra a aba Estilo.
- Para espaços diferentes no celular, veja Ajustes só do celular.
Espaço em cima e embaixo
É o jeito mais simples. Escolha um tamanho e o bloco ganha esse espaço acima e abaixo do conteúdo (no computador):
| Opção | Espaço (cada lado) | Quando usar |
|---|---|---|
| Nenhum | 0 px | Banner e faixas que devem encostar nos vizinhos. |
| Pequeno | 40 px | Blocos curtos, como um título seguido de uma vitrine. |
| Médio | 76 px | O padrão da maioria dos blocos. |
| Grande | 110 px | Seções de destaque que precisam "respirar". |
No celular os valores se reduzem sozinhos (Médio vira 52 px e Grande 72 px). O Banner com busca tem desenho próprio e costuma ficar em "Nenhum".
12- 1Espaço em cima e embaixo: Nenhum, Pequeno, Médio ou Grande.
- 2Logo depois vem a largura.
Preenchimento (padding): espaço por dentro
É o espaço entre a borda do bloco e o conteúdo. Quando o bloco tem fundo colorido, o preenchimento aumenta a faixa colorida. São quatro caixinhas:
- Cima, Direita, Baixo e Esquerda, em pixels, de 0 a 400.
- Deixe em branco o lado que não quer mexer (o editor mostra um traço "–" e usa o padrão).
- O botão do cadeado (elo de corrente) ao lado: com ele aceso, digitar um número em um lado coloca o mesmo nos quatro.
123- 1Preenchimento (padding): Cima, Direita, Baixo, Esquerda.
- 2Cadeado: muda os quatro lados juntos.
- 3Margem (margin): aceita números negativos.
Se você preencher o "Cima" ou "Baixo" do preenchimento, esse valor vale mais que o "Espaço em cima e embaixo".
Margem (margin): espaço por fora
É o espaço entre o bloco e os vizinhos. Funciona igual ao preenchimento (quatro lados, cadeado), mas aceita de -300 a 400. Valor negativo "puxa" o bloco para cima do vizinho, útil para sobrepor uma faixa ao banner.
Passo a passo: aproximar duas seções
- Selecione o primeiro bloco e abra Estilo.
- Em "Espaço em cima e embaixo", escolha "Pequeno".
- Faça o mesmo no bloco seguinte.
- Para um ajuste fino, use o Preenchimento "Baixo" (por exemplo 20) no primeiro bloco.
12- 1O contorno mostra o tamanho do bloco com os novos espaços.
- 2Troque o espaço e veja o efeito na hora.
Perguntas frequentes
Qual a diferença entre padding e margin?
Padding é o espaço dentro do bloco (aumenta a área colorida). Margin é o espaço fora (afasta do vizinho).
Digitei um número e o campo ficou vazio.
Valores fora do limite são ajustados (0 a 400 no preenchimento; -300 a 400 na margem). Digite dentro desses limites.
Veja também
Ajustes só do celular · Alinhamento e largura · Bloco Espaço