How to change spacing between radio button and its text?

I have the following HTML:

<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+

How do I change the spacing between the radio 开发者_高级运维button and the "1+" text? I'd like the text to be closer to the radio button, but the browser is inserting a certain amount of undefined padding between the two elements.

Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:

<input type="radio" name="beds" value="1" style="margin-right: 0" />1+

You probably want to add it to your stylesheet so that it applies to all radio buttons:

input[type="radio"] {
  margin-right: 0;
}

You'll need the label element.

<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>

You can then style this like this:

label {
  margin-left: -3px;
}

Also note the use of the for attribute for accessibility purposes.

Just change the input id's width to auto in css.

#input-id {
width: auto;
}

You can add this to your stylesheet:

input[type="radio"] {  
  margin-right: 10px;
}

First Create id's inside input tag (eg id="input1"), then style id's in css file(eg #input1{margin-left:5px; margin-top:5px;}) also you can use inline styling using margin-top:5px,and margin-left:5px