Visão geral de margem, preenchimento, espaçamento e posicionamento

Para obter instruções detalhadas sobre como usar margem e preenchimento no GemPages v7, confira nosso tutorial abaixo:

Margem e preenchimento

Margem é o espaço fora da borda de um elemento, criando distância entre esse elemento e os adjacentes. Pode ser ajustado para os lados superior, direito, inferior e esquerdo, permitindo controle sobre o layout e a separação visual.

Acolchoamento, por outro lado, é o espaço dentro da borda de um elemento, agindo como uma almofada entre o conteúdo e as bordas. Assim como as margens, o preenchimento pode ser ajustado para cada lado, garantindo que o conteúdo não toque nas bordas do elemento.

Espaçamento

Espaçamento refere-se aos ajustes feitos para controlar os espaços e a distância geral entre vários elementos em uma página.

Por exemplo, nos no Elemento de linha, as configurações de espaçamento podem ser utilizadas para definir os espaços entre as colunas. Ao ajustar o espaçamento, você pode controlar a distância entre as colunas, garantindo que o layout pareça equilibrado e visualmente atraente.

Posição

As configurações de posição no GemPages são um atributo importante para posicionar elementos em uma página web. Este atributo permite controlar como um elemento é posicionado em uma página web usando valores diferentes.

Vou ao Posição seção sob o Avançado no painel de configurações à esquerda. A partir daqui, você pode escolher a posição preferida para qualquer elemento no menu suspenso:

• Estático: O valor padrão para elementos e não pode ser posicionado usando os atributos superior, inferior, esquerdo ou direito.
• Relativo: Se Static for a maneira padrão de exibir a posição de um elemento, então Relative é a maneira de exibir sua posição relativa. A posição inicial ainda ocupará um espaço na página.
• absoluto: A posição de um elemento em relação ao elemento pai de rolagem mais próximo.
• Fixo: A posição de um elemento em relação à janela de visualização.
• Sticky: A posição de um elemento em relação ao seu elemento pai.

Perguntas frequentes sobre margem, preenchimento e espaçamento

1. Por que minhas imagens aparecem deslocadas para a direita ou sobrepostas em vez de centralizadas?

Isso geralmente acontece quando o acolchoamento o valor está definido muito alto em um lado do elemento.

Tente reduzir o preenchimento esquerdo ou direito, ou redefinir o preenchimento para os valores padrão.

Se o problema persistir, verifique o margem configurações ou use o Posição opções (por exemplo, Centralizar) para realinhar o elemento.

2. Como posso garantir que meu conteúdo não toque nas bordas de um elemento?

Aumentar o acolchoamento dentro do elemento.

O preenchimento cria espaço entre o conteúdo e a borda do elemento, ajudando seu design a parecer equilibrado e mais fácil de ler.

3. Qual é a melhor maneira de criar espaço entre dois elementos?

Uso margem para adicionar distância fora da borda de um elemento.

Por exemplo, aplicar margin-bottom a um título criará espaçamento antes do próximo elemento abaixo dele.

4. Como ajusto o espaço entre colunas em um elemento Row?

Vou ao Espaçamento configurações do elemento Row e aumentar o Lacuna de coluna.

Isso controla a distância entre as colunas e ajuda a deixar o layout mais uniforme.

5. Quando devo usar as configurações de posição em vez de margem ou preenchimento?

Uso Posição quando você precisa de controle preciso de onde um elemento fica na página (por exemplo, cabeçalho fixo, banner fixo).

Para espaçamento de layout geral, margem e preenchimento geralmente são melhores.