「width: 100%」の CSS 入力が親コンテナを超えて拡張されるのはなぜですか?

幅 100% の CSS 入力が親の境界を超えます

幅 100% の入力フィールドが親コンテナを超えて拡張される状況が発生した可能性があります。 CSS。これは、CSS ボックス モデルがパディングを処理する方法が原因で発生します。

デフォルトでは、パディングとマージンは要素の幅と高さの上に追加されます。通常、これは問題ありません。ただし、要素にパディングが追加され、幅: 100% の場合、パディングによってコンテンツが親の境界の外側に押し出されます。

これを防ぐには、ボックス モデルがパディングを処理する方法を変更する必要があります。 CSS プロパティの box-sizing を使用すると、これを行うことができます。 box-sizing: border-box を設定すると、パディングが要素の幅と高さに含まれるようになり、問題が効果的に修正されます。

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  ...
}

この変更により、入力フィールドが親の境界を超えないようになります。パッドが適用されていても。ボックス サイズに関するブラウザの互換性を必ず確認してください。

以上が「width: 100%」の CSS 入力が親コンテナを超えて拡張されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。