Indenting multiline labels

Question

I have the following automatically-generated HTML:

http://jsfiddle.net/BrV8X/

What is the advised way, using CSS, to indent the label so that there's some white space under the radio button?

Answer 1

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

Here's the fiddle: http://jsfiddle.net/hrfmt/ . Play with the values.

EDIT:

If all the browsers you need to support can understand display: inline-block, use that instead of float.

Answer 2

label {
   position:relative;
   padding-left:20px;
   display:block;
}

label input[type=radio] {
   position:absolute;
   top:4px;
   left:0px;   
}

http://jsfiddle.net/BrV8X/4/

Answer 3

Here's an example of how to do that without resorting to floats. You'll have to do some magic with negative margins with this approach.

input {
    display: inline-block;
    margin-right: -100px;
    /* The 2 below properties are just for "correct" vertical placement of the button. */
    margin-top: 5px;
    vertical-align: top;
}
label {
    display: inline-block;
    margin-left: 100px;
    margin-right: -100px;
}
div {
    /* Just some spacing between the radio buttons. */
    margin-bottom: 5px;
}

http://jsfiddle.net/4osbp0mo/2/