css - 为什么 html { font-size : 1rem; } create 1px right border?

Question

我正在使用 Bootstrap 4。我有一个导航栏等等。

在学习媒体查询的过程中，我发现了一个 CSS 规则，我发现它有助于稍微降低我的整体字体大小......

html {
  font-size: 0.9rem;
}

问题是，当我这样做时，它似乎在整个页面上引入了 1px 的右手边框/间隙。

在this animated .gif ，您应该会在 font-size: 1rem; 处看到正常大小之间的差异。 (无边框)并且在重新加载时，边框出现在 font-size: 0.9rem; 处.

要清楚 - 加载时边框不会立即出现；我需要向右看才能看到它。而且，当我这样做时，它仍然可见。

这是正常行为吗？有任何解决方法吗？

更新:

我应该发布一些代码 - https://jsfiddle.net/iamrobertandrews/aq9Laaew/266266/

Answer 1

更改页脚元素 p-4 中的类而不是 p-3，请参见下面的代码-

<footer class="container-fluid bg-dark text-white p-4">

</footer>