Adding CSS code for increasing space between label and radio button - css

Question

I need to increase the space between the labels (which overlap with my resized radio buttons) and the radio buttons. The code snippets I have found only address the labels being to the left or right of the button. My labels are above the radio button, and now the two line labels (like "neither dislike or like", which spans two lines) are getting overlapped by the radio button. Thank you!
a screenshot of my radio buttons

Answer 1

Add this javascript to your Qualtrics question:
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var radioCells = $(qid).select('td.ControlContainer');
var limit = radioCells.length;
for(i=0;i<limit;i++) {
radioCells[i].style.paddingTop = "25px";
}
});
Adjust the "25px" as necessary. You should consider upgrading to the new Qualtrics themes where the radio buttons go away and the labels become clickable buttons.

Answer 2

jsfiddle
As I am not sure if you are using bootstrap or any other layout framework, here is a solution with a simple table layout.
td {
width:100px;
text-align: center;
}
<!--EMMET string table>(tr>(td>label[for=radio$]{myradio$})*5)+(tr>(td>input#radio$[type='radio'][name=myradio])*5)-->
<table>
<tr>
<td><label for="radio1">myradio1</label></td>
<td><label for="radio2">myradio2</label></td>
<td><label for="radio3">myradio3</label></td>
<td><label for="radio4">myradio4</label></td>
<td><label for="radio5">myradio5</label></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="myradio"></td>
<td><input type="radio" id="radio2" name="myradio"></td>
<td><input type="radio" id="radio3" name="myradio"></td>
<td><input type="radio" id="radio4" name="myradio"></td>
<td><input type="radio" id="radio5" name="myradio"></td>
</tr>