ホームページ >ウェブフロントエンド >CSSチュートリアル >内枠を追加するときに Div の寸法を変更しないようにするにはどうすればよいですか?

内枠を追加するときに Div の寸法を変更しないようにするにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-14 03:49:10170ブラウズ

How to Keep a Div's Dimensions Unchanged When Adding an Inner Border?

寸法を拡張せずに Div 内に境界線を配置する方法

をスタイル設定するとき要素に境界線を付けると、デフォルトの動作では、要素の幅と高さの両方に境界線の太さが追加されます。ただし、div の既存の寸法内に境界線を表示したい場合があります。

この効果を実現するには、box-sizing プロパティを使用して、それを border-box:

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}
box-sizing を border-box に設定すると、div の幅と高さに境界線の太さが含まれ、境界線がその内側に表示される間、表示されるボックスのサイズは同じままになります。エッジ:

<br><pre class="brush:php;toolbar:false">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 {

box-sizing: border-box;
border: 10px solid red;
}



&l t;div>こんにちは!

こんにちは!

以上が内枠を追加するときに Div の寸法を変更しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。