Question

I have this HTML and CSS

http://jsbin.com/uciya5/3/edit

where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.

<div class="cellData">
  <input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
  <input name="ctype" value="course" type="radio" /> Course </div>
</div>

Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?

Update
Removed template tags.

Answer 1

You could add another class to the div containing radio buttons:

<div class="cellData cellRadios">

with CSS (similar to this):

.cellRadios { line-height: 1 }

See: http://jsbin.com/uciya5/2

Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that’s applied.

I’d probably also change .cellRadios to a better name.

---

If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.

<div class="cellData">
    <div class="cellRadios">
        <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
        <br>
        <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
    </div>
</div>