为什么我的网格元素之间有这么大的“间隙”，而grid-gap = 0？答案

【问题标题】：Why do my grid elements have so big "gap" between them, while grid-gap=0?为什么我的网格元素之间有这么大的“间隙”，而grid-gap = 0？
【发布时间】：2020-07-07 03:37:53
【问题描述】：

我目前正在尝试使用 HTML\CSS\JS 实现我的流叠加。

我卡在网络摄像头场景中。出于某种原因，相机下方的文字显示在其上方有很大的差距，但据我所知，我没有确定任何差距。

为什么会这样？我该怎么办？

注意到，这些代码 sn-ps 中没有发生这种情况。可能是因为它们太小了。反正有截图。

screenshot before adding text div

and after

* {
  font-family: Montserrat;
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: white;
  background-color: black;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.webcam-container {
  margin-left: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  display: grid;
}

.webcam {
  border: 10px solid white;
  /*    background-color: white;*/
  height: 540px;
  width: 960px;
}

.chat {
  margin-right: 200px;
  margin-left: 50px;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chat div {
  height: 800px;
  width: 450px;
  background-color: yellow
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="webcamScreen.css">
  <title>Web-camera screen</title>
</head>

<body>
  <section>
    <div class="webcam-container">
      <div class="webcam">Web-camera</div>
      <div style="align-self: flex-start">dfdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdffsd</div>
    </div>

    <div class="chat">
      <div></div>
    </div>
  </section>
</body>

</html>

【问题讨论】：

我没有看到差距。
@AlwaysHelping 我包含了问题的屏幕截图。真的不知道为什么 sn-ps 不显示这个差距
因为您在容器上使用 display: grid 和 .webcam { height: 540px; } 。在更大的屏幕上，webcam 无法填满容器的所有空间，因此我们看到容器之间添加了一些空间。尝试添加以下 css .webcam { align-self: end; }
如果您需要的不仅仅是缩小网络摄像头和文本之间的差距，也许您应该检查网格 css 属性并尝试不同的布局。 css-tricks.com/snippets/css/complete-guide-grid
@SyTran 谢谢！我使用了align-self: center，它对我来说非常有效！ ♥

标签： html css css-grid

【解决方案1】：

这部分

.webcam-container {
  margin-left: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  display: grid;
}

在这里，您在最后一个 ling 上将 display 重新分配给 grid。所以两个子块开始像具有自动高度的网格行块一样。 display: grid 需要更多设置。这是可以帮助您摆脱额外差距的代码。

.webcam-container {
    margin-left: 200px;
    box-sizing: border-box;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr; /* it means we have only one column */
    grid-auto-rows: auto 1fr; /* the first row height is auto and the second is all the height left */ 
}

更多关于CSS Grid。

【讨论】：

是的，它解决了这个问题，但我现在如何将这些块水平居中？
很难说。如果我是你，我会稍微重写代码。取决于所需的结果、最小值和最大值或视频块、其比例和一般响应能力。

【解决方案2】：

尝试调整高度或填充以根据需要定位网络摄像头。

.webcam {
    border: 10px solid white;
    /* background-color: white; */
    /* height: 540px; */
    /* width: 960px; */
    height: 80%;
    grid-row: 1/3;
}

【讨论】：