要素があり<div>、その上に境界線を配置したいと考えています。 と記述できることはわかっていますstyle="border: 1px solid black"が、これにより div の両側に 2px が追加され、これは私が望んでいるものではありません。
この境界線を div の端から -1px 離した位置にしたいのですが、div 自体は 100px x 100px で、境界線を追加する場合は、境界線を表示するために計算を行う必要があります。
境界線を表示し、ボックスが 100 ピクセル (境界線を含む) のままであることを保証する方法はありますか?
ベストアンサー1
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>Hello!</div>
<div>Hello!</div>効果はIE8以上。