【发布时间】：2021-12-01 21:58:33
【问题描述】：
这应该是微不足道的，但我已经花了 2 天时间并没有想法。无论我做什么，我都无法删除页面 html/body 和浏览器窗口边缘之间的外部空白。我希望页面内容与边缘齐平。
我正在使用 Angular CLI 9.1.8。 Win 10 上 Chrome 和 Edge 上的相同问题。我在这里创建了一个 stackblitz 项目来重现该问题：
- 查看： https://angular-ivy-hzzyzi.stackblitz.io/
- 编辑： https://stackblitz.com/edit/angular-ivy-hzzyzi?file=src%2Fapp%2Fapp.component.css
app.component.html：
<!DOCTYPE html>
<html>
<body>
How to remove white space between red border and browser edge...
</body>
</html>
app.component.css：
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 1px solid red;
}
红色的 1px 边框只是为了让我可以看到它们的位置并将被移除。这是它的样子：
我也试过了：
display: inline-block;min-height: 100%;height: 100vh;overflow: hidden;- css 重置：
*{ margin: 0; padding: 0; } - 在
<div>中包裹主体或组件 -
!important在每一行的末尾
我已经尝试了这些 stackoverflow 线程中的所有内容等等：
【问题讨论】：
-
创建一个 stackblitz 示例
-
@David Stackblitz 创建示例以重现该问题。问题中提供的代码足以使用默认设置重现问题。谢谢你的建议。请解锁问题..
-
这是因为您将
body/html标签添加到您的应用程序组件中，您应该不这样做。因此，您在app.component.css中定义的样式将添加到组件内的html和body标签，而不是全局标签。将您的样式添加到styles.css并从您的应用组件中删除 html/body 标签 -
@David 添加正文{位置：绝对；顶部：0； left: 0} 正如下面评论中所建议的那样有效，但你是对的，这是一个 hack，我不应该在 app.component.html 中添加 body/html 标签。我这样做是因为我的正文的页眉、主要和页脚是组件，不能从 index.html 调用。我刚刚将正文与页眉/主/页脚分开，现在一切都很好。谢谢你。 （顺便说一句，为什么这个问题被锁定？这是一个合法的问题，并提供了所有必要的信息）。
-
在您添加 stackblitz 之前，我在 11 小时前投票关闭它。确实，我没有足够关注代码。我已经投票决定重新开放它。