删除子div和父div之间的单个像素间隙答案

【问题标题】：Remove single pixel gap between child and parent div删除子div和父div之间的单个像素间隙
【发布时间】：2022-01-21 17:26:41
【问题描述】：

这是一个简单的代码块：

<style type="text/css">
.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 100%;
    height: 100px;
    background-color: #999;
}
</style>

<center>
    <div class="parent">
        <div class="child"></div>
    </div>
</center>

但是，在不同的屏幕宽度下查看结果是不同的。

这里，子 div 在一定的屏幕宽度上完全适合父 div。

但是这里，当屏幕宽度不同时，子div的两边会出现一个大约1px的空白。

我怎样才能摆脱这个空白并确保子 div 完全适合父 div？

【问题讨论】：

我无法使用您提供的代码复制此问题，这可能只是您的浏览器呈现它的方式。你用的是什么浏览器？
@Dexterians 它存在于 chrome 和 firefox 中。这取决于您是否添加了 doctype 声明。我已经用box-sizing 修复了它。
@Dexterians 我正在使用 Chrome。
@learningtoanimate 是的，我看到了你的回答并投票赞成。我没想到border-box 属性！
哈哈谢谢。这是一个常见的问题，我希望以与默认情况下怪癖模式相同的方式处理以节省此类头痛。

标签： html css

【解决方案1】：

问题在于您使用的边框以及浏览器处理此问题的方式。将box-sizing 设置为border-box 可以解决此问题。这是一个常见的，但一旦你知道它，你将能够更好地发现它。

.parent {
  position: relative;
  width: 75vw;
  height: 300px;
  border: 5px solid #000;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.child {
  width: 100%;
  height: 100px;
  background-color: #999;
  margin: 0;
}

<!DOCTYPE html>
<div class="parent">
  <div class="child"></div>
</div>

此外，您现在不需要在标签中定义text/css，浏览器知道代码是什么。也尽量不要内联使用它，除非它只是为了这个问题。同样，<center> 标签已被弃用，这意味着 HTML 5 不再支持它，因此您应该使用边距或 flex 居中。边距是最简单的，所以我在这里添加了它。

有时浏览器在 quirks 模式下也会以不同的方式处理事物，因此请确保您有 doctype 声明。

【讨论】：

这个sn-p右边还有一个空白。
你有缩放吗？ IE;页面是大了还是小了 110%？
这是因为 SO sn-ps 运行它的方式（怪癖），如果您在自己的代码软件或具有 doctype 声明的实时服务器上运行它，您会看到没有边界。就算你点击运行然后Full Page，也没关系。
确保您的浏览器设置为 100% 查看；因为有时缩放也会在页面中引起有趣的事情，当我放大 125% 时，我能够复制您的问题
我刚刚在实时服务器和本地主机预览中运行了它。对我来说，任何缩放级别都没有问题@Dexterians。

【解决方案2】：

与许多建议设置box-sizing: border-box 的答案相反，我使用了内容框，它解决了我的问题：box-sizing: content-box

【讨论】：

但解决方案有限......如果我使用浏览器缩放进行放大，那么我可以看到问题再次发生

【解决方案3】：

这是因为您使用的是 Chrome 浏览器。我对非常简单的代码有相同的行为：

        <div class="container">
            <div class="item-a">item A</div>
        </div>

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    width: 500px;
    height: 500px;
    border: 5px solid black;
    background-color: cornflowerblue;
}

.item-a {
    width: 300px;
    height: 140px;
    background-color: orange;
    border: 3px solid crimson;
}

在 100% 缩放时，它有一个间隙。当我缩放时，间隙消失了，但是当我再次缩放时 - container 和 item-a 之间的间隙可能会或可能不会再次出现（您可以注意到矢车菊背景父子边框之间 1px）。这就是 Google Chrome 目前在 Linux 和 Windows 11 中处理事情的方式。然后我尝试通过 Firefox 查看相同的代码，无论缩放都没有间隙。

【讨论】：

这个问题有解决办法吗？

【解决方案4】：

尝试设置子宽度相同：75vw；

.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 75vw;
    height: 100px;
    background-color: #999;
}

<center>
    <div class="parent">
        <div class="child"></div>
    </div>
</center>

【讨论】：