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:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Reduce Padding</title>
<style type="text/css">
div
{
    border:solid 1px;
}
input.chk {
    width: 10px;
    margin:0;
}
</style>
</head>

<body>
<div>
<input id="Checkbox1" type="checkbox"/> One <br />
<input id="Checkbox2" type="checkbox"/> Two <br />
<input id="Checkbox3" type="checkbox" class="chk"/> Three <br />
<input id="Checkbox4" type="checkbox" class="chk"/> Four
</div>
</body>

</html>

Output

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.

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Anonymous said...: I *adore* you. Fixed my little problem, thanks so much! Hugs, Bonney; October 15, 2009 at 2:58 PM
Anonymous said...: Well, I was wondering where this mysterious margin came from and how to eliminate it - you've shown me the way! Thank you!
Won't be the last time, this helped me - probably :); March 7, 2011 at 1:57 AM