html - 边框父 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>

Answer 1

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

解决这个问题的一个实用的方法是给父级和子级相同的背景颜色，前提是这不会弄乱您的样式中的其他内容。

* {
  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>