Simple css question about div's

Question

I have a very simple page like this

!!@#@ apparently I cant add link to my page on jsbin since new users aren't allowed to add links.

I want to have certain amount of gap between different options provided to the user (say 15px).

Code I have is following:

<div id="question" >
    What month is it?
    <div style="padding-right: 15px;" id="options">
        <input type="radio" name="question1" />Jan
        <input type="radio" name="question1" />Feb
        <input type="radio" name="question1" />May
        <input type="radio" name="question1" />Dec
    </div>
</div>

I thought that adding padding to the right will add padding to each of the radio buttons inside div id options. However, it is only adding padding to the whole div.

What is the bes way to handle this?

Answer 1

You can add the following rule:

div#options input { padding-right: 15px }

It will add padding to the right of each "input" element under the div with the id of "options"

UPDATED: In the sample, an "id" is being used several times. Id's must be unique, so classes would be more appropriate. See the following example:

div.options input { padding-right: 15px; }
<div class="options">
    <input type="radio">...

The class can be reused for other elements that you'd like to share the same style.

Answer 2

Your code is asking the browser to place 15px of padding on the right of the DIV so you need to be more specific with your CSS declaration:

#options input { padding-right:15px; }

If you place that between style tags or in a style sheet, it should work out just how you want it.

Answer 3

I think the root of the problem is in the HTML not so much the CSS.

Your HTML is not as good/helpful as it could be. You are presenting a list of months, so mark them up using a list:

<ol id="options" class="formList">
   <li>
      <input type="radio" name="question1" />Jan
   <li/>
   ....
</ol>

A side effect of this now being nice semantic HTML is that it gives you all the correct hooks for your styling. Each part of the form is in it's own element making applying CSS much easier - to add space around the list items use something like:

.formList li {margin:15px;}

//off topic:

You should really add label elements to you markup too. Using label elements in forms explicitly associates the text label of a form element with that form element, making the site more accessible and usable - a user can click on the text to activate the radio button which gives them a bigger target making your forms nicer and your users happier.

<label><input type="radio" name="question1" />Jan</label>

or

<input type="radio" id="radio1" name="question1" /><label for="radio1">Jan</label>