chrome中元素和边框之间的奇怪间距答案

【问题标题】：Weird spacing between element and border in chromechrome中元素和边框之间的奇怪间距
【发布时间】：2021-03-13 04:34:47
【问题描述】：

我将一些 div 包裹在一个 div 容器中，我可以在边框和元素之间看到一些 奇怪的空间。 chrome 和 edge 上出现问题。我试过 Mozilla，效果很好。

我正在使用引导程序，带有一些自定义 CSS。

我也在分享相关代码：

.fullScreen {
  height: 100vh;
  width: 100vw;
}

.mainContainer {
  align-items: center;
  justify-content: flex-start;
}

.row {
  margin: 0!important;
}

#box {
  margin: 0 0 0 5vh;
  height: 90vh;
  width: 90vh;
}

.rowEndings {
  height: 36vh;
}

.rowMid {
  height: 18vh;
}

@media (orientation: portrait) {
  .mainContainer {
    align-items: flex-start;
    justify-content: center;
  }
}

<!-- adding bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<html lang="en" class="fullScreen">

<body class="fullScreen">
  <div class="mainContainer row fullScreen">
    <div id="box" class="border border-dark">

      <div class="row rowEndings border border-dark"></div>

      <div class="row rowMid border border-dark"></div>

      <div class="row rowEndings border border-dark"></div>

    </div>
  </div>
</body>

</html>

对齐在 sn-p 中看起来很完美，但它向我展示了一些空间。我为此附上了一些片段：

我相信填充和边距没有问题。任何帮助表示赞赏:)

更新：边缘也发生了同样的事情。如果我删除添加到 #box 元素的 5vh 边距，问题就会得到解决。

【问题讨论】：

我之间没有空格。你用的是什么浏览器？
@Timberman 如果您再次阅读该问题，我将不胜感激 :) 问题出现在 chrome 上。它在 Firefox 上运行良好。
我在问，因为我使用的是最新版本的 chrome，而且我不存在这个问题。也许尝试更新您的 chrome？
好的，我创建了一个本地 html 文件，但我没有复制。你能给我们一个可复制的例子吗？只添加“box-sizing:border-box;”应用于您的所有元素解决您的问题？您的页面上的浏览器缩放设置为 100% 吗？使用轮廓而不是边框可以解决您的问题吗？另外我认为如果可能的话，你应该为你的全屏类使用 height:100% 而不是 100vh，以实现移动滚动兼容性。谢谢:)

标签： html css cross-browser spacing border-spacing

【解决方案1】：

我也有这个问题。内容和边框之间的间隙的几个像素。也不规则，每个空间都有不同的空间。我在 Edge 和 Chrome 上看到过这个。它们都是基于 WebKit 的。我没有在 Firefox 中看到它。似乎问题出在 WebKit 本身。

我对这个问题的解决方案是不使用边框。相反，我使用了

filter: dropshadow(0px 0px 0px 2px black);
box-shadow: 0px 0px 0px 2px black;

这些没有那个差距问题，但如果你正在设置你的

box-sizing: border-box;

您的width 和height 中没有包含边框大小的问题。对于这个问题，你可以把你的盒子阴影放在里面：

filter: dropshadow( inset 0px 0px 0px 2px black);

但这一次，我们又面临两个问题。

你不能让你的盒子尺寸包括阴影。所以阴影会与内容重叠。
阴影位于您设置的元素下方。所以你看不到它们。

要解决这个问题，你可以给你的元素一个::before 并给那个伪元素加上阴影

或

您可以将元素放入容器div 并为容器提供阴影。这样，您还可以为容器提供边框（阴影）大小的填充，以使其大小包括其假边框而不与它们重叠。此外，您需要将元素置于该容器内。

【讨论】：

嘿Metehan！谢谢您的帮助。 Bootstrap 提供的默认样式将“box-sizing”属性设置为“border-box”。我很久以前发布了这个问题，但从未找到一个好的答案。我通过加厚边框解决了这个问题。在那之后它工作得很好。你的回答是我读过的最好的。所以赞成你的。欢迎使用 StackOverflow。
我的边框已经大约 15px 厚，所以这不是我的解决方案。非常感谢您的支持。

【解决方案2】：

当缩放选项不是 100% 时，Chrome 有时会在边框和内容之间添加奇怪的间距。因此，请确保您的 Chrome 缩放选项设置为 100%。

窗口 Ctrl 和 + 或 Ctrl 和 -

Mac ⌘ 和 + 或 ⌘ 和 -

【讨论】：

【解决方案3】：

您应该为您的页面添加重置，因为像 Chrome 这样的浏览器有一些 默认 CSS 样式（用户代理样式），例如会导致您的麻烦：

body {
    display: block;
    margin: 8px;
}

尝试在 CSS 文件的开头或单独的文件中添加一些代码，如下所示：

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

但最好的做法是添加一个众所周知且经过测试的 CSS 重置文件，例如 Normalize.CSS https://necolas.github.io/normalize.css/，以确保您为网站编写的样式将是无论浏览器用户代理的默认样式如何，都基于相同的基础。

【讨论】：

好的，我创建了一个本地 html 文件，但我没有复制。你能给我们一个可复制的例子吗？只添加“box-sizing:border-box;”应用于您的所有元素解决您的问题？您的页面上的浏览器缩放设置为 100% 吗？使用轮廓而不是边框可以解决您的问题吗？此外，我认为如果可能的话，你应该为你的全屏类使用 height:100% 而不是 100vh，以实现移动滚动兼容性。谢谢:)

【解决方案4】：

将 !important 规则添加到您的 CSS 中。

* {
  margin: 0!important;
  padding: 0!important;
}

【讨论】：

这也不能解决问题。我已经更新了这个问题。请检查:)

【解决方案5】：

试试CSS reset:

在你的CSS:

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

【讨论】：

不！我已经尝试过了。那是行不通的。谢谢顺便说一句:)