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

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.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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

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 :)