CODEWITHSUNDEEP
css
user1394925
user1394925

Reputation: 752

How to add space using css?

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

Upvotes: 1

Views: 18071

Answers (4)

Jon P
Jon P

Reputation: 19772

Ignoring using tables for layout, this is how I think it should be done

HTML

<table id="replies">
   <tr>
     <th colspan="2">Replies</th>
   </tr>
   <tr>
      <td>Number of <br/>Replies: </td>
      <td align="left">
          <input type="radio" name="reply" value="single" class="replyBtn" id="reply_single" />
          <label for="reply_single">Single</label><br />
          <input type="radio" name="reply" value="multiple" class="replyBtn" id="reply_multiple" />
          <label for="reply_multiple">Multiple</label>
      </td>
  </tr>
</table>

CSS

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

#replies input:radio
{
    margin-right:5px;
}

Fiddle

Upvotes: 1

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

You may consider making changes to your markup first. Please don't add any text directly to your <td> or<th> tags. There are tags made to add text. Though your browser would render the text and show, but it is not a good practice. Now coming to your Question.. The markup should be like::::

<table id="replies">
<tr>
     <th colspan="2">
         <span>Replies</span>
     </th>
</tr>
<tr>
    <td><span>Number of </span><br/><span>Replies: </span></td>
    <td align="left"><span><input type="radio" name="reply" value="single" class="replyBtn" />Single</span><br /><span>
    <input type="radio" name="reply" value="multiple" class="replyBtn" /> Multiple</span></td>
</tr>
</table>​

And you would just need to add the following to your CSS:::

#replies span{
    margin:0 0 0 5px;
}
​

Please see the JSFIDDLE HERE

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

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>

Upvotes: 4

yosh
yosh

Reputation: 3305

How about simple old HTML?

<table cellpadding="3">

Or CSS:

#replies td, #replies th { padding: 3px; }

In this case both TD and TH of this table get this padding (better formatting).

Upvotes: 0

Related Questions