radio button not perfectly aligned - html

Question

who can tell me why the radio button has this strange behaviour as you can see in the picture?
it's not aligned correctly.why there is that line? I didn't applied any css style.
here it is the html code:
<div class = "ui-grid-a">
<div class = "ui-block-a">
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" style="width: 50%"/>
</div>
</div>
<div class = "ui-block-b">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="male" id="male" value="male" />
<label for="male">M</label>
<input type="radio" name="female" id="female" value="female" />
<label for="female">F</label>
</fieldset>
</div>
</div>
</div>

Answer 1

It appears as if the CSS controlling the fieldset surrounding your radio buttons is the culprit. I pulled the following from the default jQuery Mobile CSS.
.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
There is a top margin of .5em and a bottom margin of 1em. Adjust those to see if it makes any difference at all.

Answer 2

Without seeing the css I can't say for sure, but it looks like you have a default margin set on that radio button. Try resetting it with this:
input {
padding: 0;
margin: 0;
}

Answer 3

JqueryMobile automatically adds margins to the constructs it creates. I'm guessing the fieldset tags or the radio buttons themselves have additional margins from the conversion. Try adding a height property to the parent div and see if that works.
Also, the line appears when you have a narrow viewport when you use the data-role="fieldcontain". If the viewport is wider, it automatically disappears. It's JqueryMobile's way of organizing stuff around. It's usually used to group a label and its control together, so you might get a better result by not using one in that particular row of controls.