Como Remover o Espaço em Branco ao Redor das Escolhas de Imagem

Deseja eliminar o espaço extra ao redor de suas imagens ao utilizar Escolhas de Imagem para seus campos de formulário Checkbox ou Múltipla Escolha? Com apenas algumas linhas de CSS, você pode conseguir isso sem esforço, e nós estamos aqui para guiá-lo através do processo!

Criando o formulário

Primeiro, comece criando seu formulário no WPForms. Assim que tiver criado seu formulário, adicione os campos que você precisa, incluindo o campo Múltipla Escolha que servirá como base para nossa configuração de Escolhas de Imagem.

Se você não tem certeza sobre como configurar Escolhas de Imagem, pode consultar nossa documentação sobre como adicionar Escolhas de Imagem ao WPForms. Simplesmente clique aqui para instruções detalhadas.

Removendo o espaço em branco

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

Para todos os formulários

Por padrão, quando você adiciona Escolhas de Imagem ao seu formulário, um espaço em branco aparece ao redor da imagem devido ao preenchimento CSS. Este espaço em branco pode ser visto na imagem abaixo:

Para remover este espaço em branco, você precisará copiar e colar o seguinte código CSS em 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 apenas removerá o espaço em branco ao redor das imagens, mas também ocultará os rótulos associados a cada imagem, permitindo que as imagens se destaquem.

Para um formulário específico

Para remover este espaço em branco para o formulário ID 1328, você precisará copiar e colar o seguinte código CSS em seu site:

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 é isso! Você removeu com sucesso o espaço em branco ao redor das imagens em seu formulário. Por que não conferir mais artigos sobre como estilizar Escolhas de Imagem? Dê uma olhada em nosso artigo sobre Como Personalizar os Rótulos para Escolhas de Imagem.