css - 如何删除 div 内容和边框之间的空间？

Question

我在另一个 div 中有 div。如果我在外部 div 中有边框，我会在 Microsoft Edge 浏览器中以某种比例(100% 或 125%)获得一个空间。我认为这是一个舍入错误，但我不知道如何摆脱它。

html:

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

CSS:

.outer {
    background-color: black;
    float: left;
    border: 1px solid white;
}

.inner {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

jsfiddle:https://jsfiddle.net/EvgeniiMalikov/4bbx9p5w/

如您所见，外部和内部 div 之间有可见的黑色背景。如果您没有看到它，请尝试更改比例。

更新:真正出现的间隙不是在 div 元素之间，而是在靠近其边界的内部 div 内部。通过向内部 div 添加轮廓来发现它。

示例截图

带有边框和轮廓的示例屏幕截图(边框和轮廓之间的间隙)

box-sizing: border-box;
border: 1px solid lime;
outline: 1px solid lime;

Answer 1

边框 1px 添加到宽度 300px。你需要从宽度中删除 1px

.outer{background-color: black; float: left; border: 1px solid white}
.inner{width: 299px; height: 300px; background-color: yellow}

这是来自 Microsoft Edge 的屏幕截图