如何删除 div 内容和边框之间的空间？答案

【问题标题】：How to remove space between div content and border?如何删除 div 内容和边框之间的空间？
【发布时间】：2015-11-24 20:23:55
【问题描述】：

我在另一个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;

【问题讨论】：

你到底想要什么？
外部 div 的背景不应在外部 div 及其内容之间可见。我绘制 pvc 窗口块，我有多个内部 div 和外部共享一个大背景图像。背景应该只在内部 div 内可见。
这是由于亚像素渲染问题。请参阅此线程（也许答案中的几个技巧之一可能会对您有所帮助）-stackoverflow.com/questions/5832869/…
您能否发布您所看到的小屏幕截图，同时分享当前视口的缩放级别？另外，请提供您希望达到的目标的示例，因为我们可能会帮助您找到替代方法。
你能不去掉外层/内层的 div 而只保留一个吗？如果是宽度（百分比/像素）问题，则只需设置 box-sizing: border-box

标签： css microsoft-edge

【解决方案1】：

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

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

这是来自 Microsoft Edge 的屏幕截图

【讨论】：

我知道，但我需要一个边框
你认为我应该在哪里添加 1px？