Удалить прокладку из компонентов в angular2

Question

Как убрать отступы, добавленные в новые компоненты в angular2. Например:

Здесь выше заголовок моего проекта, но заполнение добавляется автоматически. Я попытался изменить заполнение на 0 в файле styles.css вне папки приложения:

/* 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>

Я также попытался добавить отступ 0 в headercomponent.css:

.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 или аналогичного в вашем браузере, вы сможете увидеть применяемые стили и их источник. Щелкните правой кнопкой мыши по вашему компоненту и выберите Inspect.

В качестве примера на скриншоте ниже вы можете видеть, как поле в tools.css переопределяет стили по умолчанию из браузера (таблица стилей агента пользователя).

Если вы измените выбранный элемент, вы сможете выяснить, откуда этот пробел.

Источник: Проверка и редактирование страниц и стилей

Answer 2

Попробуйте

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