为什么元素和它的边框之间有空间？答案

【问题标题】：Why is there space between the element and its border?为什么元素和它的边框之间有空间？
【发布时间】：2020-01-14 18:27:41
【问题描述】：

在将svgs 与 flexbox 或网格混合时发生。

请看这个简化的例子：

div {
  display: flex;
  width: 100%;
}

span {
  flex: initial;
}

svg {
  width: 0;
  height: 100%;
  border: 3px solid black;
  flex: auto;
}

<div>
  <span>Ala ma kota. A kot ma Alę</span>
  <svg>
    <rect height="100%" width="100%" fill="red"></rect>
  </svg>
</div>

问题的发生非常不一致（似乎取决于周围的盒子大小，而这又取决于屏幕大小和缩放 - 至少这是我的假设），所以如果你看不到它，让我告诉你我在这里看到的截图：

看到红色图像与其边框之间的虚假空白了吗？它是最右边的边框。

对于我的用例，这个空间不仅看起来难看，而且几乎无法接受：我正在尝试在游戏中实现一个健康栏，而这个空间暗示健康栏未满，即使它已满。

为什么会出现这个空间，有什么办法可以摆脱它？

（Firefox，如果这很重要的话。）

【问题讨论】：

【解决方案1】：

我尝试在 Firefox 上调整大小，但无法重现空白。放大和缩小时，我看到它在 chrome 上发生了事件。当我检查元素时，会有一些奇怪的像素浮点数（例如：10.234px）。像素是普通屏幕中的最小单位，所以普通屏幕会出现上面奇怪的结果。在某些视网膜设备中，它可能运行良好。

P/S：有一个棘手的方法可以摆脱它，当你的角色完全健康时，你将 svg 标签的背景颜色设置为“红色”，我试过这种方法，看到空白消失了.

【讨论】：