Javascript 在不影响造型的情况下消除间隙

所以在之前的一篇文章中，我问过如何消除一个间隙，使身体占据整个浏览器窗口的高度。这是通过以下方法解决的：

margin: 0;

但是，我需要（或者我知道的唯一方法）使用边距设置文本样式。只要我申请了

margin-top: 50px;

主体不适合浏览器的100%高度。我知道div的所有内容都必须使用边距0才能正常工作，但我应该如何使用边距设置样式呢

有没有其他方法可以使身体达到100%的浏览器高度

---

为我做了这个把戏，

主体

有一些默认填充。因此，由于mid的内容是

100vh

+填充，这将大于

100vh

这就是您需要的吗

#内容中{
背景色：#000000；
不透明度：0.9；
高度：100vh；
宽度：750px；
左边距：200px；
}
#基础知识{
显示：表格；
保证金：0自动；
高度：400px；
宽度：725px；
}
/*内容文本*/
#sv_标题{
字体系列：BebasNeue；
字体大小：60px；
颜色：#FFFFFF；
文本对齐：居中；
边缘顶部：50px；
}
#潜水艇{
字体系列：“流沙”，无衬线；
字体大小：25px；
颜色：#FFFFFF；
文本对齐：居中；
保证金：0；
利润上限：-20px；
}

社区名称
你的副标题在这里！

我同意大家的看法，与其使用边距填充，不如看看：

#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics { 
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}

-干杯

这里的内容在父元素和子元素之间，因为父元素没有

页边距顶部

，子元素有

页边距顶部：50px

因此，现在父元素的高度为100vh和50px，这就是body不适合100%浏览器高度的原因

有两种方法可以防止页边距崩溃

• 使用

  显示：内联块

• 使用

  display:flex

• 使用

  float:left

---

或者，如果您希望在父级上保留边距，但不希望高度超过窗口高度，您可以使用

calc（100vh-marginofchildren）

像这样删除边距，并将

padding top:50px

添加到

#content mid

中？您将边距应用于整个div。您应该考虑将文本放入元素中，并将文本样式添加到这些元素中到

#content mid

对于文本，可以使用文本缩进和填充的组合。阅读了解更多信息。工作小提琴：

#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics { 
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}