Html 全高视口顶部的间隙

我正在尝试使用

100vh

和

100vw

创建一个全高全宽的html页面。我希望在内容区域周围有2米的边距，在内容区域的边缘内有2米的填充

这看起来很简单，但由于某种原因，

位置从视口顶部移动了2米，即使

和

没有边距或填充，并且设置为全宽和全高

<div id="content">
  <div class="app">
    <h3>Hello World</h3>
    <p>Why is the body not at the top of the viewport?</p> 
  </div>
</div>

请注意，内容区域会滚动。不应该有滚动。下面是一个活生生的例子：

我缺少什么？

.app有2米的边距：

.app {
 background-color: white;
 height: calc(100vh - 4em);
 margin: 2em;
 width: calc(100vw - 4em);
}

更新：

---

从.app中删除边距，只需在#content

add

display:inline块中添加2em填充至
.app

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 2em;
  display: inline-block;
}

.app
和
h3
也有边距

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 0 2em 2em 2em;
}

h3{
  margin-top : 0;
}

从.app中删除边距并在内容中添加2em填充

 border-top: 1px solid gold !important;
  margin-top: -1px !important;

对你的内容。工作


html，
身体{
保证金：0；
填充：0；
高度：100vh；
宽度：100vw；
}
#内容{
背景色：#999；
高度：100vh；
宽度：100vw；
边框顶部：1px纯金！重要；/*修改*/
页边距顶部：-1px！重要；/*修改*/
}
.app{
背景色：白色；
高度：计算（100vh-4em）；
宽度：calc（100vw-4em）；
边缘：2米；
}

你好，世界
为什么主体不在视口顶部？

这是因为正在折叠页边距，您可以在此处阅读

简单地说，在你的例子中，你给
.app
的边距增加了给
#content
的高度，因此出现了滚动

添加
溢出：隐藏
到
#content
类是解决这个问题的一种方法

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

无需添加另一条规则，只需删除.appNo上的2em上边距，这不会有任何帮助。你可以尝试删除他的笔中的边距，你会看到间隙仍然存在，滚动条不会消失。因此这确实解决了问题，但我想了解
.app
边距影响
主体位置的原因。另外，
app
需要是
display:flex
，我应该把它放在代码笔中。这是由于边距折叠造成的。您可以在这里找到更多信息：如果您的.app需要flex，请添加display:inline块；满足是的，这是目标。在代码笔中，您可以看到围绕左、右和底部的灰色边框。但它的顶部是白色的。
实际上从2米以下开始。你知道怎么修吗？是的，银行有保证金。但我试图理解为什么它们会导致身体开始变低。它们应该包含在正文中，而不影响正文。内容区域仍然使用此解决方案滚动。它应该是固定的。谢谢，但我不喜欢使用
！重要信息
#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}