How to Remove Whitespace From Around Image Choices

Overview

Would you like to remove the whitespace around your images when using Image Choices for your Checkbox or Multiple Choice form fields? You can easily do that with a few CSS lines and we’ll show you how!

Setup

By default, when you add Image Choices to your form, there is whitespace that appears around the image. This is put on with CSS padding.

Whitespace around image choices before the CSS

If you need assistance with how to set up your form to use Image Choices, please follow this tutorial.

To remove that whitespace, please copy and paste this CSS code snippet to your 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;
}

The whitespace around the image has now been removed.

And that’s it! You’ve successfully removed the whitespace from around the images in your form. Did you know that you can also apply images to your Checkbox form field labels using nothing but CSS only? Take a look at our tutorial on How to Apply Images to Checkbox Labels Using CSS.