边框和内部对象 CSS 之间的白色间隙答案

【问题标题】：White Gap Between Border and Inner Object CSS边框和内部对象 CSS 之间的白色间隙
【发布时间】：2022-07-15 15:44:05
【问题描述】：

当我有一个带边框的父元素，并且有一个元素在里面时，四周总是有一点白色的间隙。尽管我将内部填充和外部边距都设置为 0。示例：

#outer{
    height:10px;
    width:200px;
    border:2px solid black;
    overflow:hidden;
    border-radius:999px;
    padding:0;
}
#inner{
    width:100%;
    height:100%;
    background-color:red;
    margin:0;
}

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

【问题讨论】：

在 Chrome 中，我怀疑这是由于像素舍入和/或抗锯齿造成的。
或者根据父级与子级的显示类型，简单地将它们放在换行符上可能会导致间距伪影，而标签之间没有空格的<div id="outer"><div id="inner"></div></div> 有时会解决问题。
这是一个浏览器问题 - 例如在 Firefox 中没有差距。
如何编写它才能在 chrome 中运行？

标签： css

【解决方案1】：

使用轮廓代替边框。

参考：What is the difference between outline and border CSS properties?

#outer{
    height:10px;
    width:200px;
    outline:2px solid black;
    overflow:hidden;
    border-radius:999px;
    padding:0;
}
#inner{
    width:100%;
    height:100%;
    background-color:red;
    margin:0;
}

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

【讨论】：