デモページはこちら

inline要素にCSSでマージンを設定した場合の挙動です。以下のhtml構造のspanタグでテストします。

<p class="title">inline要素（spanタグ）：右マージン</p>
<p class="case01"><span><input type="radio" name="select" value="01" id="select01"><label for="select01">選択肢01</label></span><span><input type="radio" name="select" value="02" id="select02"><label for="select02">選択肢02</label></span><span><input type="radio" name="select" value="03" id="select03"><label for="select03">選択肢03</label></span><span><input type="radio" name="select" value="04" id="select04"><label for="select04">選択肢04</label></span><span><input type="radio" name="select" value="05" id="select05"><label for="select05">選択肢05</label></span></p>

<p class="title">inline要素（spanタグ）：右・下マージン</p>
<p class="case02"><span><input type="radio" name="select" value="06" id="select06"><label for="select06">選択肢01</label></span><span><input type="radio" name="select" value="07" id="select07"><label for="select07">選択肢02</label></span><span><input type="radio" name="select" value="08" id="select08"><label for="select08">選択肢03</label></span><span><input type="radio" name="select" value="09" id="select09"><label for="select09">選択肢04</label></span><span><input type="radio" name="select" value="10" id="select10"><label for="select10">選択肢05</label></span></p>

<p class="title">inline-block要素（spanタグ）：右・下マージン</p>
<p class="case03"><span><input type="radio" name="select" value="11" id="select11"><label for="select11">選択肢01</label></span><span><input type="radio" name="select" value="12" id="select12"><label for="select12">選択肢02</label></span><span><input type="radio" name="select" value="13" id="select13"><label for="select13">選択肢03</label></span><span><input type="radio" name="select" value="14" id="select14"><label for="select14">選択肢04</label></span><span><input type="radio" name="select" value="15" id="select15"><label for="select15">選択肢05</label></span></p>

inline要素に左右のマージンを設定した場合、マージンは有効です。inline要素に上下のマージンを設定した場合、マージンは無効です。inline要素をinline-block要素に変更すれば、上下左右のマージンが有効になります。

.case01 span {
	margin-right: 1em;
}
.case02 span {
	margin-right: 1em;
	margin-bottom: 1em;
}
.case03 span {
	display: inline-block;
	margin-right: 1em;
	margin-bottom: 1em;
}