O espaçamento externo e o espaçamento interno são o espaço ao redor de um elemento. O espaçamento externo também é conhecido como margem e é o espaço fora das bordas do elemento. O espaçamento interno também é conhecido como preenchimento e é o espaço dentro dessas bordas. Ao ajustar o espaçamento externo e interno de um elemento, você altera seu posicionamento e aparência. Isso pode fazer com que seu site pareça mais personalizado e profissional.
Para ajustar o espaçamento externo e interno em torno de um elemento:
-
Clique em Espaçamento.
-
Para alterar o espaçamento externo (margem), clique e edite os números na caixa externa. Você também pode clicar em um desses números e usar o controle deslizante para ajustar o tamanho.
-
Para alterar o espaçamento interno (preenchimento), clique e edite os números na caixa interna. Você também pode clicar em um desses números e usar o controle deslizante para ajustar o tamanho.
-
Se você estiver usando o Editor 2.0: Clique nas respectivas caixas para editar os valores de margem e espaçamento. Os valores da margem horizontal e do espaçamento estão vinculados. Se você alterar um, o outro será atualizado automaticamente. Eles podem ser desvinculados clicando no ícone do link.
Nota
Se o senhor vir espaços estranhos que não podem ser removidos, verifique todas as partes do widget, inclusive a coluna em que ele está localizado.
Para elementos dentro de uma coluna ou coluna interna, você pode ajustar rapidamente a margem do elemento arrastando as bordas do elemento na tela na mesma direção da coluna. Isso significa que as margens esquerda e direita podem ser ajustadas em colunas horizontais e as margens superior e inferior podem ser ajustadas em colunas verticais.
Considerações
-
Ao ajustar as margens em linha diretamente da tela, as margens serão desvinculadas. Ao ajustar as margens no painel Design, as margens são vinculadas, ou seja, se você alterar uma, a outra margem será atualizada automaticamente para corresponder.
-
Ao ajustar as margens embutidas, a mesma unidade de tamanho (px,%, vh, vw) definida no painel de design será mantida, a menos que o valor seja 0, caso em que ela será redefinida para px.
No modo flexível e no Editor 2.0, há opções adicionais de medição:
-
px (pixels). Fornece uma unidade de medida fixa que não é afetada pelas variações de tamanho do dispositivo.
-
% (porcentagem). Uma unidade versátil que dimensiona os elementos proporcionalmente com base no tamanho do contêiner.
-
vh (altura da janela de visualização). Dimensiona dinamicamente os elementos em relação à altura da tela (janela de visualização).
-
vw (largura da janela de visualização). Ajusta dinamicamente os elementos com base na largura da tela (janela de visualização), garantindo uma escala proporcional em diferentes dispositivos.
Nota
Para obter informações detalhadas, consulte Unidades de tamanho.
Para alterar a unidade de tamanho:
-
Abra o painel de design de um elemento.
-
Navegue até a seção Espaçamento.
-
Clique em uma das caixas.
-
Clique na unidade de tamanho atual.
-
Clique na unidade de tamanho desejada.