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

Question

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

我正在使用 bootstrap，带有一些自定义 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>

片段中的对齐看起来很完美，但它向我展示了一些 space。我为此附加了一些片段：

我相信填充和边距没有问题。感谢您的帮助:)

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

Answer 1

尝试 CSS reset:

在你的 CSS:

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

Answer 2

将 !important 规则添加到您的 css。

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

Answer 3

您应该将重置添加到您的页面，因为像 Chrome 这样的浏览器有一些 默认 CSS 样式 (user agent styles) 就像这个给你带来的麻烦：

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

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

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

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

Answer 4

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

Window Ctrl 和 + 或 Ctrl 和 -

Mac ⌘ 和 + 或 ⌘ 和 -

Answer 5

我也有这个问题。内容和边框之间的差距的几个像素。也不规则，每个空间不同。我在 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);

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

您不能让 box-sizing 包含阴影。所以阴影与内容重叠。
阴影在您设置的元素下。所以你看不到它们。

要解决这个问题，您可以给您的元素一个 ::before 并将阴影赋予该伪元素

或

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

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

Weird spacing between element and border in chrome

html

css

cross-browser

spacing

border-spacing