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.
