Radio Button line spacing

[Mervin83]

How do you create more line space between radio button options?

The default is awfully close together, which is not ideal for touchscreen users. In the radio button styling, you can edit word and letter spacing but not line spacing between options?

[Newed]

You will need some custom CSS.

Place an HTML element on the page and use the following code:

<style>

.RadioButtons {
  gap: 20px;
}

</style>

Change the value “20” to the desired value.

Remembering that the “gap” is valid for both axes. So, depending on the structure of your layout, you might only want to apply it to one of the axes. To do this, replace the “gap” property with “row-gap” (column-aligned options) or “column-gap” (row-aligned options).

NOTE: Using the “.RadioButtons” class, all Radio Buttons elements on the page will receive the changes.

If you want to apply this to a specific Radio Buttons element, use a specific ID.

<style>

#element-id {
  gap: 20px;
}

</style>

[Mervin83]

@Newed

<style>

.RadioButtons {
  gap: 20px;
}

</style>

Thankyou so much Newed. That worked straight away. Would you be able to please add the css to change radio button size and color? Or is there a good resource for radio button css? Css is not my forte.

[mayur]

Good tip! FYI, if you also want to change the line height of the label, you would use this in addition:

.radio label {line-height:1.5em;}

So then your complete CSS code would be

<style>

.RadioButtons {
  gap: 20px;
}
.radio label {
  line-height:1.5em;
}

</style>