Unwanted space on top and bottom of checkbox

I'm trying to remove unwanted space above and below a checkbox. I'm using Contact Form 7 on a WordPress site, writing in the template's custom CSS field. I've already tried to modify the display, line-height, margin, padding and vertical-align attributes, both of the checkbox and of the span class. This is the current situation:

screenshot of the annoying checkbox :(

Obviously I'd like the text and the checkbox to be aligned. Can you help me?

The page is here

And here is the code:

<p>
  <span class="wpcf7-form-control-wrap acceptance-845">
    <span class="wpcf7-form-control wpcf7-acceptance">
      <span class="wpcf7-list-item">
        <label>
          <input type="checkbox" name="acceptance-845" value="1" aria-invalid="false">
          <span class="wpcf7-list-item-label">I agree to the processing of my personal data (GDPR/ Privacy Reg. 2018 EU 2016/79)</span>
        </label>
      </span>
    </span>
  </span>
</p>

Thank you



Read more here: https://stackoverflow.com/questions/66483881/unwanted-space-on-top-and-bottom-of-checkbox

Content Attribution

This content was originally published by Michele Oliveri at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: