How to Reduce the Margin/Padding around a CheckBox

June 23, 2009

How to Reduce the Margin/Padding around a CheckBox

Tuesday, June 23, 2009 Posted by Suprotim Agarwal
Labels: CSS

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.

Bookmark this link on del.icio.us (saved by 0 users)