Themes

Before I run of and hide in my secret bunker ;).....

Is it not the fault of the containing element that requires the '-4px' in the first place?

It's a Moodle+Bootstrap specific hack. There's a comment slightly above that, with a fuller explanation.

In Moodle the label tag is beside the radio/checkbox, but in Bootstrap they wrap the label tag around the radio/checkbox (and in version 3 they then wrap another div around that to help lay it out correctly).

So the ideal solution (from my perspective) would be for Moodle's checkboxes and radio buttons to be wrapped within the label tag (and for BS3 another div), as that gives you better HTML to work with, and can then simply inherit the Bootstrap CSS. (Note that in the past this was considered less accessible, I think that's why Moodle does it the way it does it, but is now (very slightly) more accessible).

Bootstrap puts a lot of time and effort into making all the form elements line up nicely, Moodle not so much. Getting the (various, all slightly different) Moodle forms layouts to look the same as Bootstrap was a ridiculous amount of work, and in the end it involved a lot of black magic like the dodgy hack commented above. As a result it's a bit of a house of cards, I personally wouldn't touch it, and focus on trying to get Moodle's form HTML standardised instead.

I think that value is overridden in many places anyway, so e.g. if you're saying "this looks better" or "that looks better" you'd probably be best to specify exactly which page of Moodle and which specific checkbox you are referring to (and double check that all the other ones haven't been affected by your proposed change).