How to space between username and password forms

Question

I'm creating a webpage for my internship and i need a login and password form. I animated the text boxes like this:

input[type=text] {
    z-index: 10;
    width: 30px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 30px;
    display: block;
}
input[type=text]:focus {
    width: 130px;
}

<input type="text" name="username" placeholder="User.." size="30" />

And then I inserted the table in a div and did the same thing to the password

#login {
    position: absolute;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: left;
    right:350px;
    bottom:5px;
    height: 200px;
    width:200px;
}


input[type=text] {
    z-index: 10;
    width: 30px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 30px;
    display: block;
}
input[type=text]:focus {
    width: 130px;
}



input[type=password] {
    z-index: 10;
    width: 30px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    display: block;
    height: 30px;
}
input[type=password]:focus {
    width: 130px;
}

<div id="login">
            
         <form name="frmLogin" method="post" action="">
            <br><br>
            <table width="100" align="center">
                
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username" placeholder="User.." size="30" /></td>
                </tr>
                
                
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
                </tr>
                
                
            </table>
            <input type="hidden" name="acao" value="login" />
        </form>

So now you can see my problem in the snippet, the login and password forms are overlaying each other and i want to have a little space between them.

Answer 1

You can either remove the position:absolute, position:absolute makes your elements get out of the normal positioning on the page. In this case it removed the spacing between them and placed the input boxes lower than the table lables.

If you want that, you can fix this by changing the margin of your password field like Keerthana Prabhakaran mentioned in the comment.

Answer 2

#login {
    /*position: absolute;*/
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: left;
    right:350px;
    bottom:5px;
    height: 200px;
    width:200px;
}


input[type=text] {
    z-index: 10;
    width: 30px;
    /*position: absolute;*/
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 30px;
    display: block;
}
input[type=text]:focus {
    width: 130px;
}



input[type=password] {
    z-index: 10;
    width: 30px;
    /*position: absolute;*/
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    display: block;
    height: 30px;
}
input[type=password]:focus {
    width: 130px;
}

<div id="login">
            
         <form name="frmLogin" method="post" action="">
            <br><br>
            <table width="100" align="center">
                
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username" placeholder="User.." size="30" /></td>
                </tr>
                
                
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
                </tr>
                
                
            </table>
            <input type="hidden" name="acao" value="login" />
        </form>

The problem here is position:absolute. Depending on your usage, you can make it work with position absolute as well, But you will have to declare height. For now, I've just removed the position. Hope this helps.

Answer 3

Remove position absolute from both input css

#login {
    position: absolute;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: left;
    right:350px;
    bottom:5px;
    height: 200px;
    width:200px;
}


input[type=text] {
    z-index: 10;
    width: 30px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 30px;
    display: block;
}
input[type=text]:focus {
    width: 130px;
}



input[type=password] {
    z-index: 10;
    width: 30px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    display: block;
    height: 30px;
}
input[type=password]:focus {
    width: 130px;
}

<div id="login">
            
         <form name="frmLogin" method="post" action="">
            <br><br>
            <table width="100" align="center">
                
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username" placeholder="User.." size="30" /></td>
                </tr>
                
                
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
                </tr>
                
                
            </table>
            <input type="hidden" name="acao" value="login" />
        </form>