【发布时间】：2021-10-07 13:19:51
【问题描述】：
我正在使用 Angular 开发 SPA，并且我在 CSS 中指定了 html, body { height: 100% } 和 body { margin: 0 }。在这种情况下，如果我在组件中使用带有默认边距的 HTML 标签，例如<h1> 标签，页面就会溢出。
这似乎是由于body的第一个元素的边距被body的边距替换，这与普通HTML中的行为不同。在纯 HTML 中，第一个元素的上边距被忽略，并且正文永远没有边距。然而，这种行为在 Angular（或者准确地说是 React）中并非如此。
这是什么原因？
另外，有什么方法可以在 Angular 中实现正常的 HTML 行为？
Stack Blitz 中的示例如下：
- 纯 HTML： https://stackblitz.com/edit/web-platform-x6cd4l?file=index.html
- 角度： https://stackblitz.com/edit/angular-ivy-2yrmkw?file=src/app/app.component.ts
- 反应： https://stackblitz.com/edit/react-ts-4mdnyl?file=index.tsx
提前致谢。
【问题讨论】：
-
看起来是您的 HTML 版本丢失了
<!DOCTYPE html>，因此呈现方式有所不同。并且溢出是由于H1有一个上边距，导致body和html之间有一个边距。 -
正如你所指出的，纯 HTML 版本缺少
<!DOCUTYPE html>，所以我添加了它。不再忽略body第一个元素的上边距，但溢出还是有区别的。有什么方法可以防止 Angular 溢出？ - 修改后的纯 HTML 示例：stackblitz.com/edit/web-platform-x6cd4l?file=index.html -
在上面的纯 HTML 示例中，没有加载 CSS。在 CSS 工作的情况下，它的行为与使用 Angular 或 React 渲染时的行为相同。非常感谢您的帮助。
-
我用 StackBlitz 做不到，所以我用 CodePen 做。 - 重新修改纯 HTML 示例：codepen.io/yokotani/pen/abwxeNj
-
正如我在原始评论中提到的那样。 H1 有边距。只需将
margin-top: 0设置为h1，问题就不再存在了。
标签： javascript html css angular