The common HTML form input controls of checkbox (<input type=”checkbox”>) and radio (<input type=”radio”>) can be tricky to be aligned correctly in the same line with the text or image across all modern browsers. Without any CSS styling, they usually place themselves 3 or more pixels above or below the normal text flow which look anything but nice.
Setting margin or padding won’t help, the whole line would be shifted either downward or upward. So what can be done to align the stubborn input controls nicely with the texts? You can take one of the 3 approaches to achieve this.
- Float the checkbox or radio to the left.
- Using vertical-align:middle to align the checkbox and radio in the middle with the rest of the text. It’d look much better after you have vertically aligned the controls in the middle by this, but sometimes it also helps with 1px or 2 margin manipulation.
- Relatively position the input tags of checkboxes and radios 1 or 2 pixels above or below its original position with
position:relative;
top:1px; /* or bottom:1px; */
Which would move the control 1px downward.
Generally, the 2nd is the best of the 3 approaches.
Subscribe to Kavoir: 
I'm 28, a big boy living in China who doesn't know much about anything other than building websites. Mostly mediocre ones, some good ones, and a few great ones are making me 6 figure USD per year. I have 2 Internet companies, one formed in China (Nexky Co., Ltd.) and one formed in US (Kavoir LLC) that are operating 2 of my latest ventures. It's hard enough to be an entrepreneur, let alone a whimsical one. I keep coming up with weird new ideas and the obsession to build them real. I'm starting to grow tired of all this because I have pushed myself too hard for the past 5 years. Building websites used to be a hobby but now that it's a living, I need to keep up the work for the money, especially when you have 100 sites. I want a break. I think I'm either much too ambitious or I'm just too greedy.
{ 10 comments… read them below or add one }
Thanks for the tip Mr. Yang. This is just what I needed for my website.
Glad it helped!
The second option (vertical-align:middle) does not work (in Firefox at least), but the third option (position:relative) does work. Thanks for the great tip, Mr. Yang!
Many many thanks Yang Yang….it helps me a lot
Thanks man, its really useful. Float:left works fine on every browser
Thanks for helpful code.this workly nicely specilly for padding of inline span thats I searching from many days.
Just what I was looking for. Many thanks!
Great, still helpful ! Tks!
mixed your approaches and worked….
input[type=checkbox] {
border-width:0px;
position:relative;
vertical-align:middle;
bottom:1px;
right:2px;
}
First approach worked like charm