Html 当 1 px 边框添加到 div 时，Div 大小增加，不想这样做
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3254587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When 1 px border is added to div, Div size increases, Don't want to do that
提问by Nachiket
On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?
单击时，我将向 div 添加 1px 边框，因此 Div 大小增加 2px X 2px。我不想增加 div 大小。有什么简单的方法可以做到吗？
Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.
凌乱的详细解释
实际上我是将带有 float:left（相同大小，如图标）的 DIV 添加到容器 div 中，因此所有这些都一个接一个地堆叠起来，并且当（容器 div 宽度为 300px）宽度方向上没有空间时子 DIV 出现在下一行，所以它就像目录，但由于边框只有选定的 DIV 大小增加，选定的 DIV 下的 DIV 向右移动并在选定的 DIV 下方创建空白空间。
EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..
编辑：
减少选择时的高度/宽度，但如何增加它。使用一些 3rd 方框架，所以当 DIV 失去选择时没有事件..
采纳答案by Sean Amos
The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.
边框 css 属性将增加所有元素的“外部”大小，表格中的 tds 除外。您可以在 html->layout 选项卡下直观地了解 Firebug（已停产）中的工作原理。
Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.
举个例子，一个宽度和高度为 10 像素，边框为 1 像素的 div，其外部宽度和高度为 12 像素。
For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.
对于您的情况，要使其看起来像边框位于 div 的“内部”，在您选择的 CSS 类中，您可以将元素的宽度和高度减小两倍的边框大小，或者您可以为元素填充。
Eg:
例如：
div.navitem
{
width: 15px;
height: 15px;
/* padding: 5px; */
}
div.navitem .selected
{
border: 1px solid;
width: 13px;
height: 13px;
/* padding: 4px */
}
回答by ejfrancis
This is also helpful in this scenario. it allows you to set borders without changing div width
这在这种情况下也很有帮助。它允许您在不更改 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+ */
}
Taken from http://css-tricks.com/box-sizing/
回答by corymathews
set a border on it before you click to be the same color as the background.
在单击之前在其上设置一个边框，使其与背景颜色相同。
Then when you click just change the background color and the width will not change.
然后当您单击时，只需更改背景颜色，宽度不会更改。
回答by chowey
Another good solution is to use outlineinstead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.
另一个好的解决方案是使用outline而不是border. 它在不影响盒子模型的情况下添加了边框。这适用于 IE8+、Chrome、Firefox、Opera、Safari。
回答by panwp
Try changing borderto outline:
尝试更改border为outline：
outline: 1px solid black;
回答by Edward Newell
Having used many of these solutions, I find using the trick of setting border-color: transparentto be the most flexible and widely-supported:
在使用了许多这些解决方案后，我发现使用设置技巧border-color: transparent是最灵活和广泛支持的：
.some-element {
border: solid 1px transparent;
}
.some-element-selected {
border: solid 1px black;
}
Why it's better:
为什么更好：
- No need to to hard-code the element's width
- Great cross-browser support (only IE6 missed)
- Unlike with
outline, you can still specify, e.g., top and bottom borders separately - Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
- 无需硬编码元素的宽度
- 出色的跨浏览器支持（仅错过了 IE6）
- 与 with 不同
outline，您仍然可以分别指定例如顶部和底部边框 - 与将边框颜色设置为背景颜色不同，如果您更改背景，则无需更新此颜色，并且它与非纯色背景兼容。
回答by Hoang Trung
Try this
尝试这个
box-sizing: border-box;
回答by Tho
I usually use padding to resolve this issue. The padding will be added when border disappears and removed when border appears. Sample code:
我通常使用填充来解决这个问题。当边框消失时填充将被添加，当边框出现时将被移除。示例代码：
.good-border {
padding: 1px;
}
.good-border:hover {
padding: 0px;
border: 1px solid blue;
}
View my full sample code on JSFiddle: https://jsfiddle.net/3t7vyebt/4/
在 JSFiddle 上查看我的完整示例代码：https://jsfiddle.net/3t7vyebt/4/
回答by Sadat
Just decrease the width and height by double of border-width
只需将宽度和高度减少两倍边框宽度
回答by Luke Taylor
You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:
你可以用插入阴影做一些奇特的事情。在元素底部放置边框而不改变其大小的示例：
.bottom-border {
box-shadow:inset 0px -3px 0px #000;
}
