CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Achraf JEDAY
Achraf JEDAY

Reputation: 2104

Space between checkbox and its label not Added

I have the same HTML and CSS code that I deployed to another environment for testing purposes and I noticed that there is no space between a checkbox and its label which is not the case in my local environment.

I inspected the input element and the label element to see if there is any CSS that I could be missing out and I didn't find anything.

I think the spacing is added automatically by the browser but in my case it is not and I don't know why.

This is the HTML of the checkbox:

<p><input aria-required="true" class="form-checkbox required form-input" data-drupal-selector="edit-field-webform-rgpd" id="edit-field-webform-rgpd" name="field_webform_rgpd" required="required" type="checkbox" value="1" /> <label class="option js-form-required form-required" for="edit-field-webform-rgpd">J'ai lu et j'accepte</label></p>

Can anyone give me some hints about the spacing that is added between a checkbox and its label?

Thanks in advance.

EDIT:

No spacing added automatically it is just a space character that was stripped off by Drupal and using the non-breaking space html entity prevented that.

Upvotes: 1

Views: 184

Answers (1)

A.McD
A.McD

Reputation: 61

Try using a non-breaking space entity, &nbsp;, between the two. As seen here

<p><input aria-required="true" class="form-checkbox required form-input" data-drupal-selector="edit-field-webform-rgpd" id="edit-field-webform-rgpd" name="field_webform_rgpd" required="required" type="checkbox" value="1" />&nbsp;<label class="option js-form-required form-required" for="edit-field-webform-rgpd">J'ai lu et j'accepte</label></p>

Upvotes: 2

Related Questions