|
|
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.
'Like' us on our FaceBook page if you find this blog useful. Thanks!
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
2 Responses to "How to Reduce the Margin/Padding around a CheckBox"I *adore* you. Fixed my little problem, thanks so much! Hugs, Bonney
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 :)
Post a Comment