HTML Radio Buttons: add space between the buttons from the same groupe

Asked 6/9, 2012 at 6:44 Answered 6/9, 2012 at 7:15

I have 3 radio buttons on the same line in a td of the table like that:

<td align="left">
            CHF <input type="radio" name="currency"  id="chf_currency" checked="checked" onChange="currencyChanged()" />
            USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
            EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>

Now I would like to add some spaces between those radio buttons and I don't know how to do it.

I tryed to use width attribute, margin attribute but nothing changes.

Thank you very much.

Morin answered 6/9, 2012 at 6:44 Comment(2)

use input[type="radio"]{padding: or margin or line-height} – Retiform 6/9, 2012 at 6:49

Hi @ArpitSrivastava, Thank you for your answer. The line you give me is CSS ? I am new in HTML and WEB programming, sorry for asking that. – Morin 6/9, 2012 at 6:52

Check working example on jsbin

Also, here is the code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <td align="left">
            CHF <input type="radio" name="currency"  id="chf_currency" checked="checked" onChange="currencyChanged()" />
            USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
            EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>

CSS:

input[type="radio"]{
  margin: 0 10px 0 10px;
}

Popinjay answered 6/9, 2012 at 7:15 Comment(0)

Use like this in CSS

input[type="radio"]{
      //padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}

Retiform answered 6/9, 2012 at 7:0 Comment(0)

Try this:

input[type="radio"]{margin:10px 0};}

put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:

<style type="text/css"> 
   input[type="radio"]{margin: 10px 0};} 
</style>

Hope this helped!

Northwester answered 6/9, 2012 at 7:4 Comment(0)

If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.

HTML:

<label>CHF <input type="radio" name="currency"  id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>

CSS:

<style type="text/css">
label + label {
    margin-left: 20px;
}
</style>

http://jsfiddle.net/9cJJ9/

Negligee answered 6/9, 2012 at 7:11 Comment(0)

Recommended topics

Hot tags