label text always 1-2 px below checkbox (slightly misaligned)

[Nadine]

Nadine

February 1, 2020 at 4:48 am

Hi,

this has slightly bothered me for quite some time (but not enough to look into it up to now). On the usual

label
input checkbox or radio
span with text

The span with text is always slightly misaligned, that is about 1-2 px below the checkbox/radio. This kind of markup is on the cart and checkout pages when you select shipping or payment method.

It is also on the login page for my account.

Chrome on Windows 10: *Login to see link
Firefox on Windows 10: *Login to see link (it is easier to see in Firefox since the Inspector has horizontal lines here and you see the 1-2 px gap below the checkbox)

Here for checkout:
Firefox Windows 10: *Login to see link
Chrome Windows 10: *Login to see link

As said it is just 1-2px.

I took pictures on Windows, but sometimes also use Firefox on Ubuntu/Gnome which uses the native system UI elements for checkboxes/radios. And then it really looks like misaligned by rather 2-4px. Not sure about Safari on Mac.

Here’s a screenshot with a line centered on the radio’s center with Chrome for Windows 10: *Login to see link I think it is probably just 1-2px that the label text should be higher (or the radio/checkbox one px lower)