Как добавить место между текстом и переключателем?

Question

Я хочу, чтобы между текстом и переключателем было пустое пространство. Для этого я попробовал класс css answerBottomYesNo, добавив margin-left: 7px. по какой-то причине это не сработало. Ниже фрагмент кода

<div class="questionRow odd"> 
       <div class="question"> 
        Ear Aches? 
       </div> 
       <div class="answers"> 
        <label for="rbEarAches1"><span class="answerBottomYesNo" ><input type="radio" id="rbEarAches1" name="EarAches" value="true" data-bind="checked: EarAches">Yes</span></label> 
        <label for="rbEarAches0"><span class="answerBottomYesNo"><input type="radio" id="rbEarAches0" name="EarAches" value="false" data-bind="checked: EarAches">No</span></label> 
       </div> 
      </div> 

Что я должен сделать, чтобы дать пространство между радио-кнопки и текст. Я мог бы сделать nbsp, но я действительно хочу, чтобы это было в файле CSS. Помогите оценить!

Answer 1

Вместо span, добавьте margin к input type=radio внутри span как это:

.answerBottomYesNo input[type="radio"]{ 
    margin-right:20px; 
} 

Смотрите рабочую скрипку: https://jsfiddle.net/4ageousp/