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

Question

点击我添加,1px边框到div,所以Div大小增加2px X 2px.我不想让div大小增加.有没有简单的方法呢？

凌乱的详细解释
实际上我正在使用float:left(相同大小,如图标)添加DIV到一个container-div,所以所有都堆叠起来,当(container-div width是300px)时,没有空格宽度,所以子DIV进入下一行,所以就像目录一样,但由于边框只选择了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

边框css属性将增加所有元素"外部"大小,除了表中的tds.您可以在html-> layout选项卡下了解Firebug的工作原理.

举个例子,宽度和高度为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.

(/sf/answers/582343331/)

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

您可以使用嵌入阴影做一些奇特的事情。在元素底部添加边框而不更改其大小的示例：

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

Answer 11

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

.border-me {
    position: relative;
}

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

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