我有一个<div>元素，我想给它加一个边框。我知道我可以写style="border: 1px solid black"，但这将在div的两侧增加2px，这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px，如果我添加一个边界，那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现，并确保盒子将仍然是100px(包括边界)?
当前回答
如果你使用box-sizing: border-box不仅表示边框， 填充、保证金等。所有元素都将进入父元素 元素。
Div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:150 px; 高度:100%; 边框:20px实体#f00; background - color: # 00 f; 颜色:# fff; 填充:10 px; ｝ < div > 它在20世纪60年代随着Letraset床单的发行而流行起来 < / div >
其他回答
我在上面没有看到的一个解决方案是在输入上填充，我99%的时间都是这样做的。你可以按照……
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
我喜欢的是，我有一个完整的菜单，每边的边框+填充+过渡属性。
为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
设置box-sizing属性为border-box:
div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:100 px; 身高:100 px; 边框:20px实体#f00; 背景:# 00 f; 保证金:10 px; ｝ Div + Div { 边框:10px纯红色; ｝ < div >你好!< / div > < div >你好!< / div >
它适用于IE8及以上版本。
你可以用偏移量来查看大纲，但这需要一些填充来存在于你的div上。或者你完全可以在里面放置一个边界div
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
你可能需要摆弄假边界div的边缘，以适合你喜欢的。
你可以使用属性outline和outline-offset带负值，而不是使用常规边框，适合我:
div { 身高:100 px; 宽度:100 px; 背景颜色:灰色; margin-bottom: 10 px; ｝ {div#边界 边框:2px纯红色; ｝ div #{轮廓 轮廓:2px实心红色; outline-offset: 2 px; ｝ 使用常规边界。 < div id = "边境" > < / div > 使用outline和outline-offset。 < div id = "大纲" > < / div >
