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

我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。

有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?


当前回答

为了在新旧浏览器之间保持一致的呈现,可以添加一个双容器,外部的容器具有宽度,内部的容器具有边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</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 >

为了在新旧浏览器之间保持一致的呈现,可以添加一个双容器,外部的容器具有宽度,内部的容器具有边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

这显然只在精确宽度比额外标记更重要的情况下才会发生!

11年后,答案在这里:

只用提纲: 外形:0.2vw纯红色;

我希望我能帮助那些11年后也看到这个问题的人。

一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持,但在IE11中还没有变量(可使用polyfills)。

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

虽然这确实需要一些计算,这是最初的问题想要避免的。我认为这是一个使用计算的好时机,因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。

这个解决方案只有在不需要固定高度的情况下才真正有用。

我知道这有点老了,但由于关键字“内部边界”直接把我带到了这里,我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时,我得到了OP所说的效果。边框的广告像素与盒子的尺寸一致,这使它跳动。 还有另外两种方法也适用于IE7。

1) 有一个边界已经附加到元素,并简单地改变颜色。这种方法已经包含了数学。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) 用负边缘补偿你的边界。这仍然会增加额外的像素,但元素的位置不会跳跃

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}