Question

点击即可添加，1px边框为div，因此Div尺寸增加2px X 2px。我不想让div大小增加。有没有简单的方法呢？

凌乱的详细解释
实际上我用浮点数添加DIV：左（相同的大小，像图标）到一个容器-div，所以所有的堆叠一个接一个，当（容器 - div宽度是300px）没有空格宽度，所以孩子DIVs来了在下一行，所以它的目录，但由于边框只选择了DIV大小增加，所选DIV下的DIV会向右移动，并在选定的DIV下方创建空白区域。

修改
选择时减小高度/宽度，但如何增加它。使用某些第三方框架，因此在DIV失去选择时没有事件..

Answer 1

这在这种情况下也很有用。它允许您设置边框而不更改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/

Answer 2

border css属性将增加所有元素的“外部”大小，除了表中的tds。您可以在html-＆gt;布局选项卡下的Firebug（discontinued）中直观地了解其工作原理。

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

对于你的情况，为了使它看起来像边框位于div的“内部”，在你选择的CSS类中，你可以通过加倍边框大小来减少元素的宽度和高度，或者你可以做到元素填充相同。

例如：

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

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

Answer 3

在点击与背景颜色相同之前在其上设置边框。

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

Answer 4

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

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

Answer 5

尝试将边框更改为大纲。

大纲：1px纯黑色;

Answer 6

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

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

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

为什么它更好：

无需硬编码元素的宽度
出色的跨浏览器支持（仅限IE6错过）
与outline不同，您仍然可以单独指定（例如，顶部和底部边框）
与将边框颜色设置为背景颜色不同，如果更改背景，则无需更新此颜色，并且它与非纯色背景兼容。

Answer 7

试试这个

box-sizing: border-box;

Answer 8

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

.good-border {
  padding: 1px;
}

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

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

Answer 9

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

Answer 10

尝试在增加边框时减小边距

Answer 11

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

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

<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">

jsfiddle

调整您喜欢的外观，你很高兴！

Answer 12

有时您不希望在没有明确设置的情况下影响高度或宽度。在这种情况下，我发现使用伪元素很有帮助。

.border-me {
    position: relative;
}

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

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

Answer 13

你可以用插入阴影做一些奇特的事情。将边框放在元素底部而不更改其大小的示例：

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

Answer 14

您可以使用与背景颜色相同的边框创建元素，然后当你想要显示边框时，只需更改它的颜色。

Answer 15

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

Answer 16

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

width: calc(100% - 2px);

减去2px的边框

Answer 17

您可以尝试使用阴影框

类似这样的东西： box-shadow：插入0px -5px 0px 0px #fff

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

Answer 18

如果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

当div添加1 px边框时，Div尺寸增加，不想这样做

18 个答案: