CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10380

CSS input element width going outside container

Why are the email and password widths going out of the input-container width?

  form {
    background: #ccc;
  }
  .input-container {
    background: red;
    width: 469px;
    margin: 0 auto;
  }
  .usermail,
  .userpword {
    margin-top: 10px;
  }
  input,
  button {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #cacece;
    padding: 10px 12px;
    font-size: 1em;
  }
  .username input {
    width: 206px;
  }
<form action='' method='post' id='signupform'>
  <div class='input-container'>
    <div class='username'>
      <input type='text' name='fname' id='fname' placeholder='First Name'>
      <input type='text' name='lname' id='lname' placeholder='Last Name'>
    </div>
    <div class='usermail'>
      <input type='email' name='email' id='email' placeholder='Email'>
    </div>
    <div class='userpword'>
      <input type='password' name='pword' id='pword' placeholder='Password'>
    </div>
    <button>Sign Up</button>
  </div>
</form>

Upvotes: 5

Views: 4168

Answers (1)

Bruno Monteiro
Bruno Monteiro

Reputation: 712

That's because you set padding. It will sum the value of the element width with the padding set.

To avoid this behavior, is recommended to add the property box-sizing: border-box

Example:

#element{
    box-sizing: border-box;}

Or even better:

*{
    box-sizing: border-box;}

Upvotes: 7

Related Questions