Chrome 为带边框的 DIV 添加填充答案

【问题标题】：Chrome adds padding to DIVs with bordersChrome 为带边框的 DIV 添加填充
【发布时间】：2022-08-05 15:25:28
【问题描述】：

我知道以前有人问过这个问题，但没有人解决过，所以再问一次是公平的，在 Firefox 中很好，但任何带边框的 DIV 都有不需要的填充，所以带边框的 DIV 永远无法完美接触铬合金。它在 Firefox 甚至 IE 中绝对没问题。有没有人有任何想法？

body, html {
    background-color: black;
}

.outer {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0;
    border: 10px solid white;
}

.inner {
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
    color: white;
    background-color: white;
    border: 0;
    border: 0;
    border-radius: 0;
}

<div class=\"outer\">
<div class=\"inner\"></div>
</div>

Here\'s 基于 Chrome 的浏览器添加了边框。

在这里，它在 Firefox 中完全没问题，没有任何间隙。

我只添加了代码作为自己的页面，问题仍然存在。唯一应用的样式是显示的样式。

EDIT 为什么关闭了？这是一个已知问题，我给出了一个最低限度的可重现示例。

请编辑您的问题以包含我们可以用来重现问题的实际 HTML 代码的 sn-p。
@JosephSible-ReinstateMonica 实际上不需要，因为我已经解释了一个常见问题。会更新。
在 FF 和 Chromium 上都完全适合我
在 Chrome 99 中为我工作的代码段
如果您在 Chromium 浏览器中检查 .inner，它会说明正在应用哪些样式吗？您可以检查“计算”选项卡以找出答案。

标签： css google-chrome

【解决方案1】：

当 chrome 放大时，我会得到类似的行为。（osx 上的 chrome 103）密码笔：https://codepen.io/ankedsgn/pen/YzaLXej

在 chrome 和 FF 上看起来不错，但是当您放大 chrome 时，图像上会出现填充。请参阅 chrome 上的 codepen，放大并切换边框以查看图像的放大和缩小。

代码：

.visual {
  display: flex;
  justify-content: center;
  
  &__inner {
    border: 3px solid teal;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    overflow: hidden;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
}

【讨论】：