小编典典

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

html

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

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

有什么方法可以使边框出现,并确保框仍为100px(包括边框)?


阅读 301

收藏
2020-05-10

共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>
2020-05-10