DIV の境界線をその寸法内に表示するにはどうすればよいですか?

DIV 要素内に境界線を表示する

Web デザインでは、要素がどのように相互作用し動作するかを理解することが重要です。開発者が遭遇する一般的な問題の 1 つは、必要な寸法を維持しながら DIV 要素内に境界線を配置することです。

CSS のデフォルトの動作では、要素の外側の端に境界線が配置され、その幅と高さが効果的に増加します。これに対抗するには、ボックス サイズ設定プロパティが役に立ちます。 box-sizing: border-box を設定すると、要素の幅と高さの仕様内に境界線が含まれ、意図した寸法が正確に表現されます。

この概念を説明する例を次に示します。

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

この例では、最初の DIV のボックス サイズ プロパティが border-box に設定されており、幅と高さは 100 ピクセル (20 ピクセルの境界線を含む) に設定されています。対照的に、2 番目の DIV にはボックス サイズ プロパティが定義されていないため、要素の指定された寸法を超えて境界線が広がります。

以上がDIV の境界線をその寸法内に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。