Como remover o espaço em branco em torno das opções de imagem

Pretende eliminar o espaço extra à volta das suas imagens quando utiliza as opções de imagem para os seus campos de formulário de caixa de verificação ou de escolha múltipla? Com apenas algumas linhas de CSS, pode conseguir isto sem esforço, e estamos aqui para o guiar através do processo!

Criar o formulário

Primeiro, comece por criar o seu formulário no WPForms. Depois de criar o seu formulário, adicione os campos de que necessita, incluindo o campo de Escolha Múltipla que servirá de base para a nossa configuração de Escolhas de Imagens.

Se não tiver a certeza de como configurar as opções de imagem, pode consultar a nossa documentação sobre como adicionar opções de imagem ao WPForms. Basta clicar aqui para obter instruções detalhadas.

Remover os espaços em branco

Se não tiver a certeza de como ou onde adicionar CSS ao seu site, pode consultar este tutorial para obter orientação.

Para todos os formulários

Por defeito, quando adiciona opções de imagem ao seu formulário, aparece um espaço em branco à volta da imagem devido ao preenchimento CSS. Este espaço em branco pode ser visto na imagem abaixo:

Para remover este espaço em branco, terá de copiar e colar o seguinte código CSS no seu site:

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}

Este código CSS não só remove os espaços em branco à volta das imagens, como também oculta as etiquetas associadas a cada imagem, permitindo que as imagens se mantenham isoladas.

Para um formulário específico

Para remover este espaço em branco para o ID do formulário 1328Para isso, terá de copiar e colar o seguinte código CSS no seu sítio Web:

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}

E pronto! Removeu com êxito o espaço em branco à volta das imagens no seu formulário. Porque não consultar mais artigos sobre o estilo das opções de imagem? Veja o nosso artigo sobre Como personalizar as etiquetas das opções de imagem.