Essayer d'obtenir le haut de la marge de 10px pour tous mes éléments du formulaire

StackOverflow https://stackoverflow.com//questions/24063446

  •  02-01-2020
  •  | 
  •  

Question

im faire une boîte de connexion avec un formulaire, qui demande un email et un mot de passe.

J'ai tous mes éléments en vertical et j'essaie d'aligner tous les éléments à rester avec le haut et le bas de la marge de 10px, pour obtenir chaque élément avec le même espace.

Mais je n'ai pas de réussir à cet objectif, pouvez-vous donner une aide d'aide à comprendre ce que j'ai tort?

Je donne des antécédents à mes éléments pour être plus facile de voir comment sont les marges, et certains milieux n'apparaissent pas comme ils le devraient, il semble qu'il devrait également y avoir un certain problème de flotteurs.

Ceci est mon jsfiddle avec ce que je reçois:

http://jsfiddle.net/hp8zv/1/

Mon 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>

mon 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;

}

Était-ce utile?

La solution

Voici votre nouveau code: 

<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;
}

Voici le violon

J'espère que je vous ai aidé

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top