Preenchimento vs Margem – Qual é a Diferença no WordPress?

No WordPress, o preenchimento é o espaço entre o conteúdo e a borda dentro de um bloco, enquanto a margem é o espaço entre dois blocos separados.

Compreender a diferença entre os dois é importante para quem deseja refinar o layout do seu site WordPress.

Ajudamos muitos usuários a projetar seus sites e uma coisa em que sempre focamos é no espaçamento. É aqui que as margens e o preenchimento realmente ajudam. Quando usados corretamente, eles melhoram a legibilidade e dão ao seu site um visual limpo e equilibrado.

Neste artigo, mostraremos a diferença entre os recursos de preenchimento e margem e como usá-los no WordPress.

Diferença entre padding e margin no WordPress

Aqui está um breve resumo do que abordaremos neste guia:

O que é Preenchimento no WordPress?

O recurso de preenchimento no seu site WordPress é usado para criar espaço dentro de um bloco.

Por exemplo, você pode adicionar espaço dentro de um bloco de Texto para tornar seu layout mais visualmente atraente. Além disso, evita que o texto apareça muito perto das bordas do bloco.

Prévia do padding

Você também pode usar o preenchimento para controlar como o conteúdo flui no seu blog WordPress.

Por exemplo, se você adicionar preenchimento na parte superior e inferior de um bloco de Texto, os visitantes acharão mais fácil ler o conteúdo.

O que é uma Margem no WordPress?

Uma margem é um espaço ao redor da borda de um bloco do WordPress e seus elementos circundantes.

Isso pode ajudar você a adicionar espaço entre dois blocos diferentes, criando um layout de site mais limpo e aberto.

Prévia da margin

Por exemplo, você pode adicionar uma margem a um bloco de Imagem para criar um respiro entre ele e um bloco de Texto abaixo dele. Isso ajuda a tornar seu layout mais limpo e organizado.

Qual é a Diferença Entre Preenchimento e Margens no WordPress?

Aqui está uma lista rápida das diferenças entre os recursos de padding e margem no WordPress:

PaddingMargem
Padding significa adicionar espaço entre o conteúdo e a borda do bloco.O recurso de margem adiciona espaço fora da borda do bloco.
Adicionar padding aumenta o tamanho do bloco.Usar uma margem afeta outros blocos em seu site.
O padding cria um buffer dentro do bloco, entre o conteúdo e sua borda.Margens podem criar espaço entre dois blocos diferentes.

Como Usar Preenchimento no WordPress

Por padrão, o editor de site completo (FSE) do WordPress vem com o recurso de preenchimento (padding).

No entanto, lembre-se de que, se você não estiver usando um tema baseado em blocos, não poderá adicionar preenchimento ao seu site WordPress, a menos que use CSS personalizado.

Dito isso, se você tiver um tema de bloco, pode visitar a página Aparência » Editor na barra lateral de administração do WordPress para iniciar o editor de site completo.

Uma vez lá, escolha o modelo de página onde você deseja adicionar preenchimento aos seus blocos na barra lateral 'Modelos'. Esta barra lateral exibirá todos os modelos para diferentes páginas em seu site.

Escolha a página onde você deseja adicionar padding na coluna da esquerda

Depois de fazer isso, o modelo que você escolheu será aberto na tela.

A partir daqui, clique no botão 'Editar' para começar a personalizar seu modelo de página no editor de site completo.

Clique no ícone de Editar para o editor completo do site

Em seguida, escolha o bloco onde você deseja adicionar preenchimento. Lembre-se de que isso significa que você criará espaço entre o conteúdo e a borda do bloco.

Isso abrirá as configurações do bloco no painel de blocos no lado direito da tela.

A partir daqui, role para baixo até a seção 'Dimensões' e clique no menu de três pontos. Isso abrirá um prompt onde você deve selecionar a opção 'Preenchimento'.

Escolha a opção de padding na seção Dimensões

Em seguida, simplesmente use os dois controles deslizantes para adicionar preenchimento horizontal e vertical ao seu bloco.

Lembre-se de que esses controles deslizantes adicionarão preenchimento a todos os lados do bloco.

Padding no editor completo do site

No entanto, se você quiser adicionar preenchimento apenas ao lado superior, inferior, esquerdo ou direito do bloco, você também pode fazer isso clicando no ícone 'Opções de Preenchimento' na seção de preenchimento.

Isso abrirá um prompt do qual você pode selecionar os diferentes lados do bloco aos quais deseja adicionar preenchimento.

Escolha as opções de padding no prompt

Lembre-se de que, se você quiser adicionar preenchimentos diferentes a mais de um lado do bloco, deverá selecionar a opção ‘Personalizado’.

Isso permitirá que você defina um preenchimento personalizado para os lados superior, direito, inferior e esquerdo do bloco.

Padding para diferentes cantos

Quando terminar, basta clicar no botão ‘Salvar’ para armazenar suas configurações.

Como Usar Margens no WordPress

Assim como o preenchimento, o recurso de margem está integrado ao editor completo do site do WordPress. No entanto, lembre-se de que este recurso não estará disponível se você não estiver usando um tema de bloco.

O processo para adicionar margens é muito semelhante ao de adicionar preenchimento.

Você pode começar acessando Aparência » Editor e abrindo o modelo que deseja personalizar, assim como fizemos na seção anterior.

A partir daqui, basta selecionar o botão ‘Editar’ para começar a personalizar seu modelo no editor completo do site.

Clique no ícone de Editar para o editor completo do site

Em seguida, escolha o bloco que você deseja editar e role para baixo até a seção ‘Dimensões’ no painel do bloco à direita.

A partir daqui, você pode usar os dois controles deslizantes para definir margens horizontais e verticais iguais para todos os lados do bloco. Este recurso criará espaço ao redor do bloco que você escolheu.

Adicionar margin no editor completo do site

No entanto, você também pode usar vários controles deslizantes para adicionar margens diferentes ao redor do bloco. Para isso, clique no ícone ‘Opções de Margem’ na seção.

Isso abrirá um novo prompt na tela, de onde você pode selecionar um lado do bloco para adicionar uma margem.

Usar opções de margin

No entanto, se você quiser adicionar margens diferentes a vários lados, poderá selecionar a opção ‘Personalizado’.

O painel do bloco agora exibirá vários controles deslizantes na tela que você pode usar para definir margens diferentes ao redor do bloco.

Usar controle deslizante de margin

Quando terminar, não se esqueça de clicar no botão ‘Salvar’ na parte superior para armazenar suas configurações.

Mais Dicas para Edição Completa do Site no WordPress

Além de adicionar preenchimento e margens aos seus blocos, você também pode usar o editor completo do site para personalizar todo o seu tema do WordPress.

Por exemplo, você pode projetar todos os seus modelos de página, adicionar seu próprio logotipo personalizado, escolher cores da marca, alterar o layout, ajustar o tamanho da fonte, adicionar imagens de fundo e muito mais.

Você também pode adicionar padrões e diferentes blocos ao seu site para personalizá-lo ainda mais. Para detalhes, consulte nosso guia para iniciantes sobre como personalizar seu tema do WordPress.

Adicionar padrões aos seus layouts

Você também pode usar o FSE para adicionar um cabeçalho, menu de navegação ou CSS personalizado ao seu site.

Além disso, você pode usar Estilos Globais para garantir consistência em todo o seu site. Para mais instruções, veja nosso guia sobre como personalizar cores no seu site WordPress.

Escolha uma cor de fundo no Seletor de Cores

No entanto, se você não gosta de usar o editor de site completo e prefere ter mais controle sobre a aparência do seu site, então você pode usar SeedProd para construir páginas e até mesmo todo o seu tema.

Ele vem com um construtor de arrastar e soltar, tornando super fácil criar um tema incrível para o seu site.

Para mais detalhes, você pode ver nosso tutorial sobre como criar facilmente um tema WordPress personalizado.

Editar modelo do tema

Você também pode querer conferir nossa análise completa do SeedProd.

Perguntas Frequentes

Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre o uso de padding e margin no WordPress:

Qual é a principal diferença entre padding e margin?

A maneira mais fácil de lembrar a diferença é que o padding é o espaço *dentro* de um elemento, entre o conteúdo e sua borda.

Margin é o espaço *fora* de um elemento, criando distância entre ele e outros elementos próximos.

Quando devo usar padding em vez de margin?

Você deve usar preenchimento (padding) quando precisar criar mais espaço ao redor do conteúdo dentro de um bloco.

Por exemplo, você pode adicionar preenchimento a um bloco de grupo para que o texto interno não toque nas bordas. Use uma margem (margin) quando precisar afastar dois blocos separados um do outro.

Posso ajustar o preenchimento e as margens com um tema clássico do WordPress?

Os controles visuais para preenchimento e margem fazem parte do Editor de Site Completo e estão disponíveis apenas em temas de blocos.

Com um tema clássico, você precisaria adicionar código CSS personalizado para ajustar o espaçamento de diferentes elementos em seu site.

Qual é a diferença entre as configurações de margem e espaçamento de blocos?

O espaçamento de blocos é uma configuração global que aplica automaticamente uma quantidade consistente de espaço vertical entre todos os blocos.

Uma margem é uma configuração que você aplica a um bloco individual para adicionar espaço personalizado ao redor dele, o que pode substituir a configuração global de espaçamento de blocos.

Esperamos que este artigo tenha ajudado você a aprender a diferença entre os recursos de preenchimento e margem no WordPress. Você também pode se interessar pelo nosso guia para iniciantes sobre como alterar a altura e a largura dos blocos no WordPress e nossas principais recomendações para os melhores plugins de blocos Gutenberg para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

3 CommentsLeave a Reply

  1. Gostei dos recursos visuais que ajudaram a ilustrar os conceitos. Achei útil pensar no preenchimento como o espaço dentro de uma caixa e na margem como o espaço fora da caixa. Dessa forma, posso lembrar facilmente qual usar quando estiver estilizando meu conteúdo. Obrigado, sempre posso recomendar isso para iniciantes que estão começando com o WordPress.

  2. Estes são exatamente aqueles detalhes que uma pessoa não se lembra com frequência e depois tenta descobrir o que aquele controle deslizante realmente faz. Graças aos GIFs mencionados, está lindamente explicado o que o preenchimento (padding) e a margem (margin) fazem especificamente. É excelente. É como um auxílio mnemônico. O que você lê, você geralmente esquece, mas o que você vê, você tende a lembrar muito melhor.

  3. Eu sempre me lembrava que a margem é de fora e o preenchimento é de dentro.

    Além disso, eu continuava me lembrando que a margem é um fator importante em relação à questão responsiva em um site.

Deixe uma resposta