Aligning text beside a radio/checkbox in HTML - html

Question

There is some padding from the top to the Keep me logged in text.
How can I remove the padding and make it look like this ?
HTML:
<div class="login-radio">
<input type="radio">Keep me logged in
</div>
CSS:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: white;
font-family: arial;
}

Answer 1

Try this:
HTML:
<div>
<div class="email">
<input type="email" />
</div>
<div class="checkbox">
<input type="checkbox" />
<span>Keep me logged in</span>
</div>
</div>
CSS:
.email input {
float: left;
margin-top: 5px;
margin-left: 5px;
font-family: arial, sans-serif;
font-size: 12px;
outline: none;
}
.checkbox input {
float: left;
margin-top: 10px;
margin-left: 5px;
color: #000;
clear: both;
}
.checkbox span {
float: left;
margin-top: 7px;
margin-left: 2px;
font-family: arial, sans-serif;
}
Here's the fiddle.
Regards, Milan.

Answer 2

Try to use this:
HTML
<div class="login-radio radio">
<input type="radio" class="radio">
<label>Keep me logged in </label>
</div>
CSS
.login-radio, .login-checkbox, .radio, .checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
margin-left: -20px;
}
input[type=checkbox] {
box-sizing: border-box;
margin: 4px 0 0;
line-height: normal;
}
.radio label, .checkbox label {
display: inline;
cursor: pointer;
}

Answer 3

Is this is what you want exactly the position of your radio button to be or something else
.login-radio input {
vertical-align:top;margin-top:1px;
}
http://jsfiddle.net/we9x6k3j/1/

Answer 4

3 steps that will fix your problem:
Remove the default margin and padding that the browser applies to the <input> by default.
Wrap the text in a <label>.
Apply vertical-align: middle to the <input> and the <label>.
Working Code Snippet:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: black;
font-family: arial;
}
input{
margin: 0px;
padding: 0px;
}
input, label{
vertical-align: middle;
}
<div class="login-radio">
<input type="radio">
<label>Keep me logged in</label> <!-- wrap the text in a label -->
</div>

Answer 5

FIDDLE HERE
CSS:
.login{
width: 200px;
height:80px;
background-color: brown;
color: white;
}
.loginInput{
margin-left: 3%;
margin-top: 1%;
}
.loginRadio input{
margin-left: 3%;
vertical-align: top;
}
Key change is the vertical alignment of loginRadio input.