Neha Manchal Neha Manchal - 4 years ago 145
HTML Question

Why Input box going out of the div box after giving padding to it with 100% width

I'm trying to create a form input with 100% of same width of the container but everything is working fine until I provide padding to input boxes and when I'm using padding for the

<input type="text"> <input type="password">
these two boxes go out of the div but for
<input type="button">
it works fine can anyone tell me what is the issue and how to fix it..



body{
background-color: #eee;
font-family: Arial;
}
.login {
width: 400px;
background-color: white;
margin: 0 auto;
margin-top: 40px;
text-align: center;
padding: 5px 15px 30px 15px;
box-shadow: 1px 1px 3px RGBA(0, 0, 0, 0.39);
}
input {
width: 100%;
padding: 10px 13px;
margin-bottom: 10px;
}

<div class="login">
<h2>Log In</h2>
<form>
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
<input type="button" value="Log In">
</form>
</div>




Answer Source

This is how box model works. When you add 100% width it is applied to content. And an extra padding breaking the alignment. But you can change the box model to count the width from border.

Add Box Sizing to input fields

input {
  box-sizing: border-box;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download