我有一个<div>元素,我想在上面加一个边框。我知道我可以写style="border: 1px solid black",但是这会在div的任何一侧增加2px,这不是我想要的。
<div>
style="border: 1px solid black"
我宁愿此边框距div的边缘为-1px。div本身是100px x 100px,如果我添加边框,则必须做一些数学运算才能使边框出现。
有什么方法可以使边框出现,并确保框仍为100px(包括边框)?
将box-sizing属性设置为border-box:
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>