Unwanted space on top and bottom of checkbox

Question

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:

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

Answer 1

You have quite a weird and, probably, very bad wp theme. As a recomendation, I would not use it.

this css properties are in your example:

input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select {
    height: 50px; 
}

which means all different types of html input has a set height... including the checkbox.

To solve your problem add:

.wpcf7-list-item input {height:auto;}

(if not working probably you may need to add !important to the rule)