How to Reduce the Margin/Padding around a CheckBox

I was creating a HTML form recently which involved a lot of checkboxes. The client needed the space between the checkbox and the text to be reduced. An obvious choice was to reduce the Margin and Padding around the checkboxes, however this did not work around different browsers. I finally emulated the effect using the width of the checkbox. Here’s how:

One

Two

Three

Four

Output

image

Check out the first two checkboxes which have the default width, margin and padding. Now check out the last two checkboxes which have a reduced width, margin and padding.

This tip should save time for those who have been trying to do the same using the margin and padding properties. The trick is to also set the width property.