Html 为什么我的网格元素有这么大的“尺寸”；“差距”；它们之间，而栅格间距=0？

我目前正在尝试使用HTML\CSS\JS实现我的流覆盖

我被困在网络摄像机现场。出于某种原因，相机下面的文字显示上面有一个很大的间隙，但据我所知，我没有确定任何间隙

这是为什么？我该怎么办

请注意，这些代码片段中没有出现这种情况。可能是因为它们太小了。无论如何，这里有截图

*{
字体系列：蒙特塞拉特；
列表样式：无；
框大小：边框框；
保证金：0；
填充：0；
颜色：白色；
背景色：黑色；
}
部分{
显示：网格；
网格模板柱：1fr 1fr；
}
.网络摄像头容器{
左边距：200px；
框大小：边框框；
显示器：flex；
证明内容：中心；
对齐项目：居中；
显示：网格；
}
.网络摄像机{
边框：10px纯白；
/*背景色：白色*/
高度：540px；
宽度：960px；
}
.聊天{
右边距：200px；
左边距：50像素；
高度：100vh；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
}
.聊天室{
高度：800px；
宽度：450px；
背景颜色：黄色
}

网络摄像机屏幕
网络摄像机
DFDFDFDFDFSFSD

此部分

.webcam-container {
  margin-left: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  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 */ 
}

有关此部分的详细信息。

此部分

.webcam-container {
  margin-left: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  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 */ 
}

---

更多信息。

根据需要调整高度或填充物以放置网络摄像头

.webcam{
边框：10px纯白；
/*背景色：白色*/
/*高度：540px*/
/*宽度：960px*/
身高：80%；
网格行：1/3；
}

---

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

.webcam{
边框：10px纯白；
/*背景色：白色*/
/*高度：540px*/
/*宽度：960px*/
身高：80%；
网格行：1/3；
}

---

我看不出有什么差距。@我总是把问题的截图包括在内。我真的不知道为什么代码片段没有显示这个间隙，因为您正在容器和

上使用
display:grid
。网络摄像头{height:540px；}

。在更大的屏幕上，

webcam

无法填满容器的所有空间，因此我们可以看到容器添加的一些空间。尝试添加以下css

.webcam{align self:end；}

如果您需要的不仅仅是缩小webcam和文本之间的差距，也许您应该查看网格css属性并尝试不同的布局@SyTran谢谢你！我使用了

align self:center

，它对我非常有效！♥我看不出有什么差距。@AlwaysHelping我一直都包括问题的截图。我真的不知道为什么代码片段没有显示这个间隙，因为您正在容器和

上使用
display:grid
。网络摄像头{height:540px；}

。在更大的屏幕上，

webcam

无法填满容器的所有空间，因此我们可以看到容器添加的一些空间。尝试添加以下css

.webcam{align self:end；}

如果您需要的不仅仅是缩小webcam和文本之间的差距，也许您应该查看网格css属性并尝试不同的布局@SyTran谢谢你！我使用了

align self:center

，它对我非常有效！♥是的，它解决了这个问题，但我现在如何水平居中这些块呢？很难说。如果我是你，我会重写一下代码。取决于期望的结果，最小和最大或视频块，它的比例和一般的响应。是的，它解决了这个问题，但我现在如何水平居中这些块？很难说。如果我是你，我会重写一下代码。取决于所需结果、最小和最大视频块、其比例和一般响应性。