Editar espaçamento (margem e preenchimento)

Este tutorial em vídeo ajudará você a entender mais sobre margem e preenchimento

Neste artigo, você aprenderá como controlar o espaçamento entre elementos com margem e preenchimento.

O que são margem e preenchimento?

Todos os elementos da web possuem atributos de espaçamento como estes.

Margin	O espaçamento ao redor de um elemento. Empurra outros elementos para mais longe.
Border	Uma borda que circunda o preenchimento e o conteúdo.
Padding	Preenchimento é o espaçamento dentro de um elemento. Empurra o conteúdo dentro do elemento ainda mais para dentro.
Content	O conteúdo da caixa.

Para ler mais sobre margem e preenchimento, confira este artigo em w3school.

Como editar margem e preenchimento

Antes de seguir as etapas específicas, você pode assistir a este vídeo para saber como ajustar o elemento de espaçamento no PageFly

Para editar a margem e o preenchimento de um elemento PageFly, primeiro selecione o elemento> Styling tab > seção SPACING.

As 4 caixas vazias permitem que você preencha o valor para 4 lados: superior – direito – inferior – esquerdo. Por exemplo, com o elemento Image.

Quando você adiciona um número no campo do meio, o mesmo número será aplicado a todos os lados – superior, direito, inferior e esquerdo.

Casos frequentemente usados

Caso 1: Editar espaçamento dentro de um elemento usando preenchimento

Para editar o espaçamento dentro de um elemento, edite o preenchimento. No exemplo, queremos empurrar o “RING COLLECTION” descendo um pouco, portanto, adicionamos preenchimento superior à coluna que contém o cabeçalho.

Escolha Column > aba Styling > seção SPACING > adicione 50px ao preenchimento superior. A alteração no preenchimento ou na margem na Column é sempre preferível em relação a alteração do preenchimento ou margem de em elemento. Será mais fácil para você editar o layout depois.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vamos para Device switcher > selecione Mobile.

Em seguida, selecione Column > aba Styling > seção SPACING. Você pode ver que ele tem 50px para preenchimento superior, que foi adicionado quando o definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor que o desktop, convém modificar esses valores.

Caso 2: Edite o espaçamento entre 2 elementos vizinhos usando a margem

Para editar o espaçamento de 2 elementos vizinhos, edite a margem lateral de um elemento.

Neste exemplo, queremos colocar o botão mais longe do título “RING COLLECTION”, então adicionamos valores à margem inferior do título.

Escolha o elemento Heading > aba Styling > seção SPACING > adicione 45px à margem inferior.

A margem inferior cria mais espaço e empurra o elemento do botão para mais longe do cabeçalho.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vamos para Device switcher > selecione Mobile.

Em seguida, selecione o Heading > aba Styling > seção SPACING. Você pode ver que ele tem 45px para a margem inferior, que foi adicionada quando a definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor do que no desktop, convém modificar esses valores.

Caso 3: Editar espaçamento nos lados esquerdo / direito

Para editar o espaçamento nos lados esquerdo / direito de um elemento, use a unidade “%” em vez de “pixel” para que ele possa responder em diferentes tamanhos de tela.

No exemplo, queremos mover o parágrafo para mais perto do centro, então adicionamos valores ao preenchimento à direita e preenchimento à esquerda da seção que contém o parágrafo.

Escolha Section > aba Styling > seção SPACING > adicione 10% ao preenchimento à direita e à esquerda.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vá para Device switcher > selecione Mobile.

Em seguida, selecione Section > aba Styling > seção SPACING. Esses valores são adicionados quando o definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor que no desktop, convém modificar esses valores.

Caso 4: Editar espaçamento entre colunas na linha

Para editar o espaçamento entre colunas em uma linha, selecione o Row > aba General > seção CONTENT > ajuste o valor do Columns Spacing.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vá para Device switcher > selecione Mobile.

Em seguida, selecione Section > aba Styling > seção SPACING. Você pode ver que o Columns Spacing do Tablet, e do Mobile também tem 30px.

Como o espaço em dispositivos móveis é significativamente menor do que no desktop, convém modificar esse valor.