某些设备/浏览器上父子 div 之间的空白答案

【问题标题】：White space between parent and child div on some devices/browsers某些设备/浏览器上父子 div 之间的空白
【发布时间】：2022-08-20 16:41:40
【问题描述】：

我似乎无法删除父 div 和子 div 之间的空白。

似乎这条白线在所有设备/浏览器上都不可见。该错误主要出现在移动设备上

所有尺寸都以像素为单位指定，因此它似乎不是导致错误的半个像素。

.parent {
  border: 2px solid;
  border-color: rgb(0, 0, 0);
  height: 80px;
}

.child {
  height: 80px;
  background-color: rgb(0, 0, 0);
}

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

在您提交的代码中，您提到的顶部空白不可见。
正如我所说，这个空白在所有设备上都不可见 Snorlax
@Rounin-StandingwithUkraine 对不起，这是我的错误，我认为我必须接受您的编辑才能使其生效，但显然我做了相反的事情。我是SO的新用户...
@MaxHimes - 不用担心 - 一切都被原谅了！ ;-) 感谢您将代码添加到您的问题中。
你能举例说明这是发生在哪些设备/浏览器上吗？会更容易重现它

标签： css

【解决方案1】：

你可以使用大纲代替边界

.parent {
  outline: 2px solid;
  outline-color: rgb(0, 0, 0);
  height: 80px;
}

.child {
  height: 80px;
  background-color: rgb(0, 0, 0);
}

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

【讨论】：

【解决方案2】：

这可能是半像素，每个浏览器的行为都不同，放大时可以看到，有时看不到

https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/

【讨论】：

感谢分享！我简化了问题，它看起来像半像素没有引起问题..
是的，通过放大浏览器，我可以看到差距。但是使用轮廓或框阴影而不是边框，可以解决问题。

【解决方案3】：

如果您无法删除它，请将其隐藏：

.parent {
  border: 2px solid;
  border-color: rgb(0, 0, 0);
  height: 80px;
}

.child {
  height: 80px;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0 1px rgb(0, 0, 0); /* a tiny box-shadow to cover the gap */
}

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

【讨论】：

【解决方案4】：

此空白并非在所有设备上都可见，我不知道它是否与分辨率或浏览器有关 [...] 这个问题似乎在移动设备上比在 PC 上更常见

这是一个四舍五入的差异。可能与这一行有关：
font-size: 1.75vw;
每个设备上的浏览器都在计算像素数——在某些设备上，浏览器最终得到的结果是1px，比其他设备上的少。

修复（我很感激这需要一些设计思维) 是使用更明确的价值这不太可能以像素的一小部分结束（然后需要向上或向下舍入）。

我很想先给.rating：

一个明确的height；和

显式line-height

【讨论】：

如果我将字体大小设置为 26 像素，它似乎不起作用，问题仍然存在......
我在上面的答案底部添加了一个建议-如果您为.rating 声明一个明确的height 和line-height，这可能会有所帮助。
我试图设置孩子和父母的高度，设置线高但没有解决问题

【解决方案5】：

.parent {
   height: 80px;
}

.child {
   height: 80px;
   background: black;
}

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

这已经足够了

【讨论】：