Comment supprimer les espaces blancs autour des choix d’images

Vous souhaitez éliminer l'espace supplémentaire autour de vos images lorsque vous utilisez les Choix d'images pour vos champs de formulaire Case à cocher ou Choix multiples ? Avec seulement quelques lignes de CSS, vous pouvez y parvenir sans effort, et nous sommes là pour vous guider tout au long du processus !

Création du formulaire

Tout d'abord, commencez par créer votre formulaire dans WPForms. Une fois votre formulaire créé, ajoutez les champs dont vous avez besoin, y compris le champ Choix multiples qui servira de base à notre configuration de Choix d'images.

Si vous ne savez pas comment configurer les Choix d'images, vous pouvez consulter notre documentation sur la façon d'ajouter des Choix d'images à WPForms. Cliquez simplement ici pour obtenir des instructions détaillées.

Supprimer les espaces blancs

Si vous ne savez pas comment ou où ajouter du CSS à votre site, vous pouvez consulter ce tutoriel pour obtenir des conseils.

Pour tous les formulaires

Par défaut, lorsque vous ajoutez des Choix d'images à votre formulaire, un espace blanc apparaît autour de l'image en raison du padding CSS. Cet espace blanc peut être vu dans l'image ci-dessous :

Pour supprimer cet espace blanc, vous devrez copier et coller le code CSS suivant sur votre 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;
}

Ce code CSS supprimera non seulement l'espace blanc autour des images, mais masquera également les étiquettes associées à chaque image, permettant ainsi aux images d'être affichées seules.

Pour un formulaire spécifique

Pour supprimer cet espace blanc pour le formulaire ID 1328, vous devrez copier et coller le code CSS suivant sur votre 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;
}

Et voilà ! Vous avez réussi à supprimer l'espace blanc autour des images de votre formulaire. Pourquoi ne pas consulter d'autres articles sur la personnalisation des Choix d'images ? Jetez un œil à notre article sur Comment personnaliser les étiquettes pour les Choix d'images.