Question

I have a jsfiddle here

What I want to do is that I want to add a bit of space next to the text “Number of Replies” so that the text is not too close to the table border on either side. I also want to add a space on the right hand side next to both radio buttons.

How can this be achieved?

Thanks

Answer 1

If you add padding:10px to your CSS, you can give the elements enough space around them so that they aren’t right up against the borders:

#replies td{
    border-collapse:collapse;
    border:1px solid black; 
    padding:10px;    
}​

Here is your updated jsfiddle to give you an idea of what that would look like.

Next, to fix the problem with the radio buttons, put a <span> around both Single and Multiple, and get rid of the space. Also, add a div around each input/span pair. Afterwards, add this to your CSS:

span {
    padding-left:5px;   
}

See this jsfiddle for an example.

Here is the modified HTML:

<tr>
    <td>Number of <br/>Replies: </td>
    <td align="left">
        <div class="td">
            <input type="radio" name="reply" value="single" class="replyBtn" />
            <span>Single</span>
        </div>
        <div class="td">
            <input type="radio" name="reply" value="multiple" class="replyBtn" />            
            <span>Multiple</span>
        </div>
    </td>
</tr>