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.
-
Um (automático). Permite que o navegador calcule automaticamente a margem.
Nota
Para obter informações detalhadas, consulte Unidades de tamanho.
Para alterar a unidade de tamanho: