html - No Padding at top when combine li, radio-input and label -

i have problem padding @ top of li's. working fiddle here:

[http://jsfiddle.net/th3zq/9/][1] 

http://jsfiddle.net/th3zq/9/

what css-style solve problem?

regards john

check fiddle http://jsfiddle.net/th3zq/11/. did not add padding in css. instead have added <br> inside <li>s. removed <br> , added padding in css become unique padding on sides. can adjust padding in css.

html

<div id="content">   <ul>     <li id="q1" class="main-group">some text text text     <ul class="antworten">       <li class="a1 answer"><label>       <input type="radio" name="q1" />text a</label></li>       <li class="a2 answer"><label>       <input type="radio" name="q1" />text b</label></li>       <li class="a3 answer"><label>       <input type="radio" name="q1" />text c</label></li>       <li class="a4 answer last"><label>       <input type="radio" name="q1" />text d</label></li>     </ul>      </li>   </ul> </div> 

css

#content ul  {   list-style: none;    margin:0;   padding:0; }  #content ul ul {   margin: 0!important;   padding: 10px 0!important; }  #content ul ul li {   list-style: none;     margin-bottom: 4px!important;     padding: 10px; }  #content ul ul li.last {   margin-bottom: 0!important; }  #content .answer {   border: 1px solid #8a9839!important; }  #content .main-group {   border: 2px #f7ac1b solid;   padding:10px!important;     margin-bottom:10px!important; }