CSS入力エレメントの幅がコンテナの外に出る

Question

電子メールとパスワードの幅が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

。これは、エレメントの幅の値とパディングセットを合計します。

この動作を回避するには、プロパティに追加することをお勧めしますbox-sizing: border-box

例：

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

あるいはさらに良い：

*{ 
    box-sizing: border-box;}