Add space between a group o radio button.

Question

Hello I have a group of radiobutton, Now how can i add space between a group o radio button's options. like this

http://img692.imageshack.us/img692/3955/radiod.jpg

either using css

Answer 1

line-height is probably your best choice

Answer 2

Try putting this in your stylesheet:

input[type=radio] { margin-bottom: 15px }

Of course, you can increase the 15px to as much as you like.

Answer 3

Discodancer provided a valiad answer, but note that IE6 does not support attribute selector (http://www.quirksmode.org/css/contents.html) and you don't need a hack to overcome this problem by applying class to your radio buttons

So your HTML would be:

<input type="radio" name="foo" class="bar" value="lorem"> Lorem <br>
<input type="radio" name="foo" class="bar" value="ipsum"> Ipsum <br>
<input type="radio" name="foo" class="bar" value="dolor"> Dolor

And CSS can be like:

input.bar { margin: 5px 0; }

Answer 4

<p class="radios">
    <label><input type="radio"> Foo</label>
    <label><input type="radio"> Bar</label>
</p>

.radios label {
    display: block;
    margin-bottom: 15px;
}

Easy peasy and should work in all browsers. Always use label for all form elements, especially radio buttons and check boxes, that makes it possible to click the text as well as the tiny button to select the option.