如何删除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 的屏幕截图