父 DIV 边框与子 DIV 之间的空白问题

Question

在我的父级 div 添加边框时，我在父级 div 和子级 div 之间出现了白色空白。我已经尝试了各种方法（溢出、(最小)高度/宽度、增加边框宽度），但没有用。当我遇到图像时，也存在同样的问题。

有人知道我该如何解决这个问题以及为什么会发生吗？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

- Antonio Novak

---

将每个HTML标签都加上边框，然后截图结果 -> https://i.ibb.co/4Sc9jjP/Screenshot-from-2021-08-20-17-02-34.jpg 现在的问题是空格在哪里？ - Ghost Ops

由于我的声誉不够，我无法发布截图。 - Antonio Novak

我正在使用Chrome。 - Antonio Novak

好的，如果我将其提高到175%以上，那么问题就解决了。 - Antonio Novak

我无法复现它，无法确认但似乎是Chrome的渲染问题，您也应该在其他浏览器中测试此行为。 - Gunther

Answer 1

是的，我遇到过这个问题，我认为这与CSS像素的分数被解释为不同的方式有关，当系统将它们映射到实际屏幕像素时，许多现代屏幕上一个CSS像素对应多个屏幕像素。当然，不同缩放设置下的计算结果也会有所不同，因此有时您可以看到额外的白色，有时则不会，这取决于缩放级别。

一个实用但有些hacky的方法是，如果这不会破坏您的其他样式，给父元素设置与子元素相同的背景颜色。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
  background-color: black;
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

如果这样做会破坏您的样式，我想您可以再走一步（更hackier），在父级上使用线性渐变背景，使其具有黑色内边框（CSS px或两个），其余部分保留为白色。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(black 0 2px, transparent 2px calc(100% - 2px), black calc(100% - 2px) 100%), linear-gradient(to right, black 0 2px, white 2px calc(100% - 2px), black calc(100% - 2px) 100%);
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

- A Haworth