Trying to get margin top of 10px for all my elements of the form

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

  •  02-01-2020
  •  | 
  •  

Question

Im doing a login box with a form, that asks for email and password.

I have all my elements in vertical, and Im trying to align all elements to stay with 10px margin top and bottom, to get every element with the same space.

But Im not having sucess to this goal, can you give some help understanding what I have wrong?

I give some backgrounds to my elements to be more easy to see how are the margins, and some backgrounds do not appear as they should, it seems there should also be some problem with floats.

This is my jsfiddle with what Im getting:

http://jsfiddle.net/Hp8zV/1/

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

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

}

Was it helpful?

Solution

Here is your new 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;
}

Here is the fiddle

Hope i helped you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top