从angular2中的组件中删除填充

Question

如何删除添加到angular2中的新组件的填充。例如：

以上是我项目的标题，但填充是自动添加的。 我已经尝试在app.c文件夹外的styles.css中将填充更改为0：

/* You can add global styles to this file, and also import other style files */
body {
     margin: 0;
     padding: 0;
}

我的appcomponent.html看起来像这样：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

我还尝试在headercomponent.css中添加填充0：

.body {
    background-color: pink;
    padding-top: 0px;
}

Headercomponent.html是：

<div class="body">
<h1 class="text-center">
Crypcheck
</h1>

<p class="text-center">
Check prices of your favourite cryptocurrencies!
</p>

</div>

感谢阅读。

Answer 1

如果您使用Chrome DevTools或浏览器中的等效元素检查元素，您将能够看到应用的样式及其来源。右键单击Component并选择Inspect。

作为下面屏幕截图中的示例，您可以看到tools.css中的边距如何覆盖浏览器（用户代理样式表）中的默认样式。

如果更改了所选元素，您将能够找出该空格的来源。

来源：Inspect and Edit Pages and Styles

Answer 2

尝试

html, body{
  margin: 0;
  padding: 0;
}

Answer 3

我想添加一个答案，该答案可能对将 white-space：pre-line; 设置为人体样式的人有用，然后它会在身体顶部占用一些额外的空间。删除它或使其成为CSS的 normal 实体属性。

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 16px;
    color: #444;
    position: relative;
    z-index: 14;
    white-space: normal;
}