如何删除angular应用中的默认边距？

在Angular应用中，如果你想要删除默认的边距，通常是因为浏览器的默认样式表（如user agent stylesheet）为某些元素（如<body>、<p>、<h1>等）设置了边距。

基础概念

CSS（层叠样式表）是用来描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，你可以控制元素的布局、颜色、字体等样式属性。

解决方法

1. 全局重置

你可以通过在全局样式文件（如styles.css或global.css）中添加CSS规则来重置所有元素的边距和填充。

* {
  margin: 0;
  padding: 0;
}

注意：这种方法会移除所有元素的边距和填充，可能会导致一些布局问题，因此需要谨慎使用。

2. 针对特定元素重置

如果你只想删除特定元素的默认边距，可以针对这些元素添加CSS规则。

body, p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

3. 使用Angular的ViewEncapsulation

在Angular组件中，你可以使用ViewEncapsulation来控制组件样式的封装方式。默认情况下，Angular使用Emulated封装，这意味着组件的样式会被“模拟”到子组件中，但不会影响到全局样式。

如果你想要你的组件样式只影响当前组件，可以使用ShadowDom封装。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
  // ...
}