Adicionar ou remover espaçamento entre elementos

O que é espaçamento?

O espaçamento é uma parte importante do web design, mesmo que você nem sempre perceba. O espaçamento adequado melhora a hierarquia visual ao direcionar a atenção para os elementos-chave, melhora a legibilidade ao tornar o texto mais fácil de seguir e aumenta o engajamento do usuário ao criar um design mais convidativo e fácil de navegar.

Tipos de ajustes de espaçamento

1. Preenchimento vs. Margem

Acolchoamento e Margem são dois elementos-chave que controlam o espaçamento na sua página, mas eles atendem a propósitos diferentes:

• Margem é o espaço fora da borda de um elemento. Ele controla o espaço entre o elemento e outros elementos na página. As margens são transparentes e afastam o elemento do conteúdo ao redor, criando um buffer ao redor dele.

No GemPages, você pode usar margens para controlar a distância entre diferentes elementos, como entre duas imagens ou entre um botão e um bloco de texto, para criar separação visual ou espaço em branco.

• Acolchoamento é o espaço dentro da borda de um elemento, mas fora de seu conteúdo. Ele define a quantidade de espaço entre o conteúdo do elemento (como texto ou imagem) e a borda do elemento.

No GemPages, Padding é usado quando você quer criar espaço dentro de um elemento. Por exemplo, você pode adicionar padding a um botão para que o texto dentro tenha espaço ao redor dele, tornando o botão maior ou mais equilibrado visualmente.

Para um mergulho mais profundo em como eles funcionam, confira nosso artigo sobre Margem e preenchimento.

2. Espaçamento entre colunas e linhas

Se você estiver trabalhando com grades ou elementos agrupados, ajustar o espaço entre colunas e linhas é essencial para um layout limpo. Veja como você pode fazer isso:

• Espaçamento da coluna: Aumente o espaço entre as colunas usando o lacuna da coluna configuração no elemento Row.
• Espaçamento entre linhas: Uso Margem Superior e Tanga em elementos de linha para controlar o espaço vertical entre eles.

3. Espaçamento entre linhas e espaçamento entre letras

Quando se trata de texto, o espaçamento adequado entre linhas e letras pode fazer uma diferença significativa na legibilidade.

• Espaçamento entre linhas (altura da linha): Ajuste o espaço entre as linhas do texto para tornar seus parágrafos mais legíveis.
• Espaçamento entre letras: Modifique o espaçamento entre letras individuais para melhorar a clareza.

Como adicionar espaçamento entre elementos usando GemPages

Etapa 1: No Editor de GemPages, clique em um elemento onde você deseja adicionar espaçamento.

Etapa 2: Vou ao Avançado guia e encontre o Margem e preenchimento seção.

Etapa 3: Ajuste as configurações para adicionar o espaçamento desejado ou escolha um valor predefinido.

Como remover espaçamento entre elementos usando GemPages

Etapa 1: Vou ao Avançado guia e encontre o Margem e preenchimento seção.

Etapa 2: Defina todos os valores de espaçamento para 0 para remover o espaçamento.