ブロックレベルの入力要素が常に div のようにコンテナを満たさないのはなぜですか?

ブロックとして表示される入力要素: Div と異なる理由

入力要素は、display: block および width: で認識されるのが一般的です。 auto は div と同様に動作し、コンテナーの全幅を占めます。ただし、指定されたコード スニペットに見られるように、これは当てはまりません。

矛盾を理解する

div とは異なり、入力要素は別のボックス モデルに従います。ボーダーボックスモデル。このモデルは、div に使用されるコンテンツ ボックス モデルとは異なり、全体の幅の計算でパディングと境界線を考慮します。

問題の解決

入力要素を強制的にスパンするにはコンテナーの全幅、パディングとボーダーを考慮しながら、max-width: 100% プロパティを使用できます。この手法は基本的に、ボーダーとパディングにより計算された幅がこの値を超えている場合でも、入力要素の幅を親コンテナーに制限します。

ブラウザー間の互換性

ブラウザ間で一貫した動作を実現するには、最近導入された box-sizing: border-box プロパティを使用できます。このプロパティは、デフォルトのボックス モデルに関係なく、ターゲット要素にボーダー ボックス モデルを使用するようにブラウザに明示的に指示します。

実装

次のコードは、この解決策を示しています。 :

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text">
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

このアプローチでは、入力要素がコンテナーの全幅を占めることが保証されます。すべての主要なブラウザ。

以上がブロックレベルの入力要素が常に div のようにコンテナを満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。