当将1 px 边框添加到 Div 时，Div 大小会增加，不要这样做

点击我正在添加，1像素的边框到 Div，所以 Div 的大小增加了2像素 X 2像素。 我不想增加 div 的大小，有什么简单的方法吗 < p > 凌乱的详细解释 < br > 实际上，我是用 float: left (相同大小，像图标一样)添加 DIV 到一个容器 DIV 中，所以所有的 DIV 一个接一个地堆叠起来，当(容器 DIV 宽度为300px)没有空间留下宽度时，子 DIV 就会出现在下一行，所以它的类目录，但是由于边界只有选定的 DIV 大小会增加，选定 DIV 下的 DIV 会向右移动，并在选定的 DIV 下创建空白空间。译注: < p > 编辑: < br > 在选定内容上减小高度/宽度，但是如何增加它。使用一些第三方框架，所以当 DIV 失去选择时不要有事件。.译注:
199274 次浏览
小开

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

小开

试着在增加边框时减小边距大小

小开
最佳答案

除了表中的 tds 之外，orders css 属性将增加所有元素的“外部”大小。您可以在 html-> 布局选项卡下了解 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 */
}
小开

设置一个边框，然后单击它，使其颜色与背景颜色相同。

然后，当你点击只是改变背景颜色和宽度不会改变。

小开

这在这个场景中也很有用。它允许您在不改变 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)

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

如果你没有一个 border-radius改变 border到 outline:

outline: 1px solid black;
小开
可以创建与背景颜色相同的带边框的元素, 然后，当你想显示边框时，只需改变它的颜色
小开

试试这个

box-sizing: border-box;
小开

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

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

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

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


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

为什么更好:

  • 不需要硬编码元素的宽度
  • 很好的跨浏览器支持(只有 IE6没有支持)
  • 与 outline不同，您仍然可以分别指定顶部和底部边框
  • 与将边框颜色设置为背景颜色不同，如果更改了背景颜色，则不需要更新该边框颜色，并且它与非纯色背景兼容。
小开

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

.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);
}

Rel = “ nofollow”> jsfiddle < a href = “ https://jsfiddle.net/91xs47av/”rel = “ nofollow”> jsfiddle

调整你的首选外观，你可以去！

小开

我通常使用填充来解决这个问题。当边框不在时将添加填充，当边框返回时将删除填充。例如:

.good-border {
padding: 1px;
}


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

enter image description here

请看我的代码: https://jsfiddle.net/3t7vyebt/4/

小开

我们还可以使用 csscalc ()函数

width: calc(100% - 2px);

减去2像素的边界

小开

如果您的 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: 插入0px-5 px 0px 0px # fff

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


提交答案