在div内而不是在其边缘放置边框

Question

我有一个<div>元素，我想在上面加一个边框。我知道我可以写style="border: 1px solid black"，但是这会在div的任何一侧增加2px，这不是我想要的。

我宁愿此边框距div的边缘为-1px。div本身是100px x 100px，如果我添加边框，则必须做一些数学运算才能使边框出现。

有什么方法可以使边框出现，并确保框仍为100px（包括边框）？

Answer 1

将box-sizing属性设置为border-box：div {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; border: 20px solid #f00;&nbsp; &nbsp; background: #00f;&nbsp; &nbsp; margin: 10px;}div + div {&nbsp; &nbsp; border: 10px solid red;}<div>Hello!</div><div>Hello!</div>它适用于IE8及更高版本。