How to Remove Whitespace From Around Image Choices

Introduction

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 this with a few CSS lines and we’ll show you how!

Creating the form

First, you’ll need to create your form, and add your fields which will include the Multiple Choice field that will add to set up for our Image Choices.

If you’re not sure how to set up Image Choices, please take a look at this documentation.

Adding the CSS

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

To remove that whitespace, you’ll need to copy and paste this CSS to your site.

If you need any help in how and where to add CSS to your site, please review this tutorial.

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

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

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

This CSS not only removes the whitespace around the images but will also remove the text label that displays under each image to let the image stand alone.

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.