如何去除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;

- Evgenii Malikov

---

你到底想要什么？ - Ykaro Lemes

外部div的背景不应该在外部div和其内容之间可见。我正在绘制PVC窗口块，我有多个内部div和外部div来共享一个大的背景图像。背景应该只在内部div中可见。 - Evgenii Malikov

这是由于子像素渲染问题所致。请查看此线程（也许那里的几个答案中的某一个技巧可以帮助您）-- https://dev59.com/KG025IYBdhLWcg3wvIgo - Abhitalks

@EvgeniiMalikov，你能展示一下你想要达到的效果吗？ - Sampson

@Sampson 背景不应透过内部元素可见 - Evgenii Malikov

Answer 1

边框的1像素是加到宽度300像素上的。您需要从宽度中减去1像素。

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

这是来自 Microsoft Edge 的屏幕截图

- Rami Sarieddine

---

我知道它，但我需要一个边框。 - Evgenii Malikov

你认为我应该在哪里加1像素？ - Evgenii Malikov