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

Question

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

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

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

Answer 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>