当将1 px边框添加到div时，div的大小会增加，不想这样做

单击时，我要添加1px边框到div，因此Div大小将增加2px X 2px。我不想增加div的大小。有没有简单的方法可以做到这一点？

混乱的详细说明
实际上，我正在将带有float：left（大小相同，如图标）的DIV添加到容器div中，因此所有容器都一个接一个地堆叠，并且当（container-div宽度为300px）没有横向宽度时，子DIV排在下一行，因此类似于目录，但由于边框的缘故，所选DIV的大小只会增加，因此所选DIV下的DIV会向右移动并在所选DIV下创建空白空间。

编辑：
在选择上减少高度/宽度，但是如何增加它。使用某些第三者框架，因此当DIV失去选择时不会发生任何事件。

border css属性将增加所有元素的“外部”大小，表中的tds除外。您可以在html-> layout标签下直观了解Firebug的工作原理（已停产）。

举个例子，一个div的宽度和高度为10px，边框为1px，其外部宽度和高度为12px。

对于您的情况，要使其边框看起来像div的“内部”，在选定的CSS类中，您可以将元素的宽度和高度减小一倍，边框大小也可以减小，元素填充。

例如：

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

在这种情况下，这也很有帮助。它允许您设置边框而不更改div宽度

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

取自http://css-tricks.com/box-sizing/

单击与背景相同的颜色之前，请在其上设置边框。

然后，当您单击时，只需更改背景颜色，宽度就不会更改。

另一个好的解决方案是使用outline代替border。它添加边框而不影响盒子模型。这适用于IE8 +，Chrome，Firefox，Opera，Safari。

（https://stackoverflow.com/a/8319190/2105930）

尝试更改border为outline：

outline: 1px solid black;

使用了许多这些解决方案后，我发现使用设置的技巧border-color: transparent是最灵活和得到广泛支持的：

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

为什么更好：

• 无需对元素的宽度进行硬编码
• 强大的跨浏览器支持（仅缺少IE6）
• 与相比outline，您仍然可以分别指定顶部和底部边框
• 与将边框颜色设置为背景的颜色不同，如果更改背景，则无需更新此颜色，并且它与非纯色背景兼容。

试试这个

box-sizing: border-box;

我通常使用填充来解决此问题。边框消失时将添加填充，边框出现时将删除填充。样例代码：

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

在JSFiddle上查看我的完整示例代码：https ://jsfiddle.net/3t7vyebt/4/

只需将宽度和高度减小边框宽度的两倍

您可以使用嵌入阴影来做一些有趣的事情。在元素的底部放置边框而不更改其大小的示例：

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

有时，您不希望高度或宽度不显式设置而受影响。在这种情况下，我发现使用伪元素会有所帮助。

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

您还可以对伪元素做更多的事情，因此这是一个非常强大的模式。

当增加边框时，尝试减小边距大小

我需要能够通过添加类来“边界”任何元素，并且不影响其尺寸。对我来说，一个好的解决方案是使用盒子阴影。但是在某些情况下，由于其他兄弟姐妹的影响，该效果不明显。因此，我同时结合了典型的盒形阴影和嵌入式盒形阴影。结果是不改变任何尺寸的边框外观。

值以逗号分隔。这是一个简单的例子：

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

调整以适应您的偏爱外观，您就该做好了！

我们还可以使用css calc（）函数

width: calc(100% - 2px);

边框减去2px

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

您可以创建具有与背景相同颜色的边框的元素，然后在要显示边框时，只需更改其颜色即可。

如果您的内容div是动态呈现的并且您想要设置其高度，则可以使用以下简单的技巧outline：

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

此处的示例：https : //codepen.io/Happysk/pen/zeQzaZ

你可以尝试一个阴影盒

像这样的东西：box-shadow：inset 0px -5px 0px 0px #fff

在元素的底部添加一个白色的5px边框，而无需增加大小