为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡说叔叔 2019-10-14 11:08:40
我有一个<div>元素,我想在上面加一个边框。我知道我可以写style="border: 1px solid black",但是这会在div的任何一侧增加2px,这不是我想要的。我宁愿此边框距div的边缘为-1px。div本身是100px x 100px,如果我添加边框,则必须做一些数学运算才能使边框出现。有什么方法可以使边框出现,并确保框仍为100px(包括边框)?
查看完整描述

3 回答

?
繁星淼淼

TA贡献1775条经验 获得超11个赞

将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及更高版本。


查看完整回答
反对 回复 2019-10-14
  • 3 回答
  • 0 关注
  • 1028 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信