html - 入力を div に揃える

Question

私はそのようなhtmlコードを持っています:

<div class="one1">
<div class="one">
<input class="two" name="user[email]" placeholder="Ваш e-mail" required="required" type="email">
</div>
</div>​

とcss

.one1{
    background-color: #000;
    width:200px;
    height: 200px;
}
.one{
    margin: 0 auto;
    background-color: #cecece;
    width:180px;
    height: 200px;
}
.two{
    width: 100%;
    margin: 0;
    padding: 0;
}
​

しかし、右の境界線で入力が少し大きいのはなぜですか? 1つのdivであるため、どうすればクリアできますか? （また、丸い境界線と影があります）

ここ：

リンク

Answer 1

最良の方法は、入力の左右の各側で 1 ピクセルを削除し、100% ではなく手動で設定することです。

.two{
    width: 178px;
    margin: 0;
    padding: 0;
    border:1px solid black;
}

Answer 2

marginandを削除しますpaddingが、入力にはborderalso があります。に追加border:noneしてみてくださいinput。

デモ

Answer 3

ボーダー幅が含まれているためです。試す：

.two{
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

Answer 4

これは、ユーザー エージェント スタイルシートによって追加された境界線が原因です。クラスに追加border: 0;しtwoます。

.two{
    width: 100%;
    margin: 0;
    padding: 0;
    border:0;
}

Answer 5

境界線を 1 ピクセルに保ちたい場合は、次のようにします。

.two {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

ブラウザーは、コンテンツ + パディングに基づいて入力の幅 (100%) を計算しています。ブラウザーに境界線も含めるように指示します。

Answer 6

このcssプロパティを使用できます

input.two{
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}