Tentar obter uma margem superior de 10px para todos os meus elementos do formulário
Pergunta
Estou fazendo uma caixa de login com um formulário, que pede email e senha.
Eu tenho todas as minhas elementos na vertical, e estou tentando alinhar todos os elementos para ficar com 10px margem superior e inferior, para obter cada elemento com o mesmo espaço.
Mas não estou tendo sucesso para este objetivo, você pode dar alguma ajuda para entender o que eu tenho de errado?
Dou alguns planos de fundo para o meu elementos para ser mais fácil de ver como são as margens, e alguns planos de fundo não aparecem como deveriam, parece haver também deve ser algum problema com carros alegóricos.
Este é o meu jsfiddle com o que estou ficando:
Meu html:
<body>
<div class="loginbox">
<h1>Login Form:</h1>
<span class="ms in">Enter your acess data.</span>
<form name="login">
<label class="label">
<input placeholder="Email" type="text" />
</label>
<label class="label">
<input type="password" placeholder="Pass" class="pass" />
<input type="submit" value="Login" class="btn" />
<a href="#" class="link">Forgot</a>
</label>
</form>
</div>
</body>
Meu Css:
*{margin:0; padding:0;}
body{overflow:hidden;}
.loginbox{position:absolute; left:50%; top:50%;background:#f7f7f7; width:360px; height:340px;}
.loginbox{margin-left:-180px; margin-top:-162px; background:pink;}
.loginbox h1{padding:20px; font-weight:200; color:#fff; background:brown; font-size:30px;}
.loginbox form{padding:20px; background:yellow;}
.loginbox form .label{display:block; margin-bottom:10px; margin-top:10px; float:left; width:320px;background:green;}
.loginbox form .label input{padding:10px; font-size:16px; border:1px solid #CCC; width:299px; float:left;}
.loginbox form .label .pass{width:299px; float:left;}
.loginbox form .label .btn{float:right; width:auto; display:block; background:brown; border:none; text-transform:uppercase; margin:20px auto;}
.loginbox form .label .btn{padding:11px 10px 11px; color:#fff; font-weight:bold; cursor:pointer; width:320px;}
.loginbox form .link {text-align:center; text-decoration:none; color:#000; background:blue;}
.ms{padding:20px 10px 5px 20px;float:left;display:block; width:320px; background:red;
}
Solução
Aqui está o novo código:
<body>
<div class="loginbox">
<h1>Login Form:</h1>
<span class="ms">Enter your acess data.</span>
<form name="login">
<input placeholder="Email" type="text"/>
<input type="password" placeholder="Pass"/>
<input type="submit" value="Login" class="btn"/>
<a href="#">Forgot</a>
</form>
</div>
</body>
*{
margin:0;
padding:0;
border: 0;
}
.loginbox *{
box-sizing:border-box;
}
.loginbox{
position:absolute;
left:50%;
top:50%;
background:#f7f7f7;
width:360px;
height:290px;
margin-left:-180px;
margin-top:-162px;
background:pink;
}
.loginbox h1{
padding:20px;
font-weight:200;
color:#fff;
background:brown;
font-size:30px;
}
.loginbox form{
padding:20px;
background:yellow;
}
.loginbox form input{
margin-top: 10px;
padding:10px;
font-size:16px;
width:100%;
float:left;
}
.loginbox form .btn{
background:brown;
text-transform:uppercase;
margin:10px auto;
padding:10px;
color:#fff;
font-weight:bold;
cursor:pointer;
width:100%;}
.ms{
padding:10px 10px 10px 20px;
float:left;
width:100%;
background:red;
}
.loginbox form a {
text-align:center;
text-decoration:none;
color:#000;
background:blue;
}
Espero ter ajudado você
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow