Persistent unwanted space between labels - html

Question

I've been trying to eliminate the space between these two labels, which I'd like to be side-by-side, to no avail. I've checked the way jQuery UI does it, but as far as I can tell their CSS is the same as mine. What am I missing?
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
}
.buttonset label.checked {
border: 2px solid #5dccdb;
color: #5dccdb;
font-style: italic;
}
.buttonset input[type='radio'] {
display: none !important;
}
Fiddle
Any help appreciated.

Answer 1

Remove the white space between the labels in your HTML:
Demo http://jsfiddle.net/w76rM/4/
There are several ways to do it, three of the quickest ones are to comment out the white space, have all the elements in one line or have the ending > of the previous tag at the beginning of the next line.
1 -In one line:
<Label>...</label><Label>...</label>
2- Commented out:
<Label></label><!--
--><Label></label>
3- > of previous tag at the beginning of the next line:
<Label></label
><Label></label>
Your markup with commented out white space:
<div class="buttonset one_half">
<div>Twins</div>
<label for="twins_yes">
<input id="twins_yes" name="twins" type="radio" value="Yes">Yes</label><!--
--><label for="twins_no" class="checked">
<input id="twins_no" name="twins" type="radio" value="No" checked>No</label>
</div>

Answer 2

You have to add float left to the label elements
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
float: left; }