当 1 px 边框添加到 div 时，Div 大小增加，不想这样做[重复]

Posted 2023-03-06

【中文标题】当 1 px 边框添加到 div 时，Div 大小增加，不想这样做[重复]

【英文标题】：When 1 px border is added to div, Div size increases, Don't want to do that [duplicate]

【发布时间】：2011-03-16 08:06:42

【问题描述】：

点击我添加，1px 边框到 div，所以 div 大小增加了 2px X 2px。 我不想让 div 大小增加。有什么简单的方法吗？

乱七八糟的详细解释 实际上，我正在将带有 float:left （相同大小，如图标）的 DIV 添加到容器 div 中，因此所有这些都一个接一个地堆叠起来，并且当（容器 div 宽度为 300px）没有空间离开宽度方向时，子 DIV 来了在下一行，所以它像目录，但由于边框只有选定的 DIV 大小得到增加，选定 DIV 下的 DIV 向右移动并在选定 DIV 下方创建空白空间。

编辑： 减少选择的高度/宽度，但如何增加它。使用一些 3rd 方框架，所以当 DIV 失去选择时没有事件..

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

border css 属性将增加所有元素的“外部”大小，表格中的 tds 除外。您可以在 Firebug (discontinued) 中的 html->layout 选项卡下直观地了解其工作原理。

举个例子，一个宽度和高度为 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 */

【讨论】：

thnx，我有 .dragdrop-selected 类，但它被所有可拖动对象使用，并且我有 3 种不同大小（3 种不同类型）的可拖动对象，所以我在所有 3 和在 .dragdrop-selected 中设置填充.. 它有效。 :)

这不是响应式设计的好解决方案。使用outline 或与背景颜色相同的边框（并在选中时将其颜色更改为其他颜色）更加灵活。

但是假设您需要避免硬编码宽度，让元素流动或响应视口宽度：使用border-color: transparent查看我的答案

不需要这些计算，只需将box-sizing设置为border-box即可。见ejfrancis' answer below，见this article。

您确定表格中的 td 吗？在 Chrome 中，它似乎仍然增加了大小。

【参考方案4】：

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

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

【讨论】：

巧妙！希望我自己能想到。

是的，但是如果您没有纯色背景？使用border-color: transparent

查看我的答案

如果你有一个影子盒，这将无法正常工作。

我没有完全相同的问题，但您的回答对我的用例很有帮助。谢谢

【参考方案5】：

这在这种情况下也很有帮助。它允许您在不更改 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/

【讨论】：

box-sizing: border-box 应该作为现代最佳实践真正设置在所有东西上。见paulirish.com/2012/box-sizing-border-box-ftw

这在某些情况下似乎不起作用；不完全确定为什么。见：codepen.io/anon/pen/QZaBQG

@WilsonB​​iggs 是的！一点都不靠谱！

【参考方案6】：

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

(https://***.com/a/8319190/2105930)

【讨论】：

很好，但是和边框相比，没有“outline-left，...”，不适合我的情况。

那么我建议在类似的问题上使用box-shadow per my other answer。它没有相同的浏览器支持，但如今这已不再是问题。

谢谢#chowey，刚刚发现box-shadow也可以支持单边边框，完美解决方案。

border-color: transparent 有更好的跨浏览器支持---看我的回答...

这条评论被低估了。这是在不调整元素大小的情况下获得元素边框的好方法！

【参考方案7】：

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

.filter_list_button_remove:hover 
    border: 1px solid; 

【讨论】：

我认为这对 OP 和其他访问者会更有帮助，当您为您的意图添加一些解释时。

【参考方案8】：

如果您没有border-radius，请将border 更改为outline：

outline: 1px solid black;

【讨论】：

工作，除非你有边界半径。

outline-left、outline-right、outline-top、outline-bottom 真的不见了……

如果您没有边界半径，那么这是完美的解决方案。

这个答案只是重复了两年前@chowey 给出的答案。

【参考方案9】：

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

【讨论】：

是的，但是假设您的背景不是纯色...请参阅基于使用border-color: transparent的回复

或者像ul li aborder-bottom:2px solid transparent; ul li a:hoverborder-bottom:2px solid red;这样的全部一起

【参考方案10】：

试试这个

box-sizing: border-box;

【讨论】：

这应该是答案，很简单。

为什么这在任何地方都不起作用？例如。 codepen.io/anon/pen/QZaBQG

嗨@Tom，我不确定为什么它还不起作用。但在您的情况下，请考虑删除容器中的高度并改用填充。可以解决你的问题。

这是最好的答案。

【参考方案11】：

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

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

【参考方案12】：

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

.some-element 
    border: solid 1px transparent;


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

为什么更好：

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

【讨论】：

我发现这最适合我的 UX 中动态大小的项目。完全停止了 onMouseOver 发生的大小变化！谢谢纽厄尔先生！

比硬编码减少宽度和高度以增加边框要好得多

【参考方案13】：

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

.border-me 
    position: relative;


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

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

【讨论】：

我有一个 1px 的边框，我想将其更改为 2px，我能找到的唯一方法是删除 width 和 height 并添加 bottom 和 @除了top 和left 之外的987654325@ 属性，所有这些都应设置为原始边框的相反宽度（在我的情况下为-1px）。很棒的技巧

这实际上对我来说非常有用，而且比实现内部 div 边框或其他技巧更简单。

【参考方案14】：

我需要能够通过添加一个类来为任何元素“加边框”并且不影响其尺寸。对我来说一个好的解决方案是使用 box-shadow。但在某些情况下，由于其他兄弟姐妹，效果并不明显。所以我结合了典型的 box-shadow 和 inset box-shadow。结果是没有改变任何尺寸的边框外观。

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

.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

调整为您喜欢的外观，一切顺利！

【参考方案15】：

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

.good-border 
  padding: 1px;


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

在这里查看我的代码：https://jsfiddle.net/3t7vyebt/4/

【讨论】：

你能告诉我实际发生了什么吗，我很困惑，为什么在糟糕的边界悬停在这里当你悬停在它上面时会向下移动？

@SurajJain 因为当您将鼠标悬停在“坏边框” div 上时，它的大小会发生变化（添加 1px 的边框）。

【参考方案16】：

我们也可以使用css calc()函数

width: calc(100% - 2px);

边框减去 2px

【参考方案17】：

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

【讨论】：

不幸的是轮廓没有圆角:(

【参考方案18】：

你可以试试 box-shadow inset

类似这样的： 盒子阴影：插图 0px -5px 0px 0px #fff

在元素底部添加一个 5px 的白色边框而不增加尺寸