Angular组件边距被用户代理样式表覆盖，如何移除？

问题根源 #

浏览器自带的用户代理样式表（默认样式）覆盖了你自定义的边距规则，通常是<body>标签默认的margin: 8px导致页面出现上下边距。另外要让组件铺满整个页面，仅给宿主元素的子元素设置height: 100%不够，还需要确保html、body以及Angular根组件<app-root>的高度都设置为100%，且根组件以块级元素显示。

解决办法 #

方法一：全局样式重置（推荐） #

在项目根目录的styles.scss中添加以下样式，从根源消除默认边距并确保页面高度拉满：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

app-root {
  display: block;
  height: 100%;
}

方法二：组件内精准调整 #

如果仅需要在当前组件生效，调整选择器覆盖宿主元素及子元素的样式，提升规则优先级：

:host {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
}

:host > * {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

补充说明 #

你之前的代码无效，是因为:host > *仅能选中组件宿主的直接子元素，无法覆盖<body>的默认边距；同时如果<app-root>默认是行内元素，height属性不会生效，必须设置display: block才能让高度规则生效。

内容的提问来源于stack exchange，提问作者AylanJ123