Breite des CSS-Eingabeelements außerhalb des Containers

Question

Warum gehen die E-Mail- und Passwortbreiten außerhalb der Breite input-container?

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>

Answer 1

, weil Sie padding eingestellt ist. Es wird den Wert der Elementbreite mit dem Padding-Set summieren.

dieses Verhalten zu vermeiden, wird empfohlen, die Eigenschaft box-sizing: border-box

Beispiel hinzuzufügen:

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

Oder noch besser:

*{ 
    box-sizing: border-box;}