3

我在一个 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>

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

在此处输入图像描述

在此处输入图像描述

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

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

4

5 回答 5

2

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

窗口 Ctrl 和 + 或 Ctrl 和 -

Mac ⌘ 和 + 或 ⌘ 和 -

于 2021-02-25T08:54:44.473 回答
2

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

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

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

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

box-sizing: border-box;

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

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

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

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

要解决这个问题，您可以给您的元素 a::before并给该伪元素提供阴影

或者

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

于 2022-02-02T19:14:51.193 回答
0

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

* {
  margin: 0!important;
  padding: 0!important;
}
于 2020-12-01T09:05:19.757 回答
0

你应该给你的页面添加一个重置，因为像 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/，以确保您为网站编写的样式将无论浏览器用户代理的默认样式如何，都基于相同的基础。

于 2020-12-01T09:07:18.343 回答
-1

尝试使用CSS 重置：

在你的CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
于 2020-12-01T09:01:58.740 回答