Неизвестное пространство в угловой составляющей

Question

Я только начал изучать Angular 6. Я создал простое приложение Angular, в котором я создал компонент заголовка.

header.component.html

<header class="head">
  <div class="header-background">
  </div>
</header>

app.component.html

<app-header></app-header>

header.component.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.head {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid green;
}

.header-background {
    background-color: rgba(128, 128, 128, 0.09);
    height: 80%;
    width: 90%;
    margin: 0 auto;
}

Когда я запускаю ng serve, я вижубелый интервал сверху, слева и справа, я не уверен, что это такое.Я дважды проверил padding и margin это 0px .

Я добавляю скриншот .

Здесь вы можете видеть, что сверху, слева и справа от моей границы .head есть пробел .Я также добавил bootstrap@3.7.7 в файл моего проекта.

Просьба предоставить решение и указать причину, по которой я столкнулся с этой проблемой.

Это место, где яговорить о.

Answer 1

Полагаю, вы не настроили инкапсуляцию стиля в своем компоненте заголовка. Если у вас есть стили в файле таблицы стилей компонентов, по умолчанию эти файлы применяются только к шаблону вашего компонента. Это означает, что ваше первое правило не применяется к телу страницы, но только для каждого тега в вашем компоненте заголовка.

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

1. Переместите ваш первый стиль (тот, что с селектором *) в основной стиль ваших приложений. Css.
2. Измените свой компонент, чтобы он не устанавливал инкапсуляцию вида.

Чтобы изменить инкапсуляцию представления, вам просто нужно добавить одну строку в ваш декоратор компонентов:

@Component({
    selector: '...',
    template: '...',
    styleUrls: ['...'],
    encapsulation: ViewEncapsulation.None,
})

Импорт должен быть

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

Answer 2

Это потому, что вы заявили, что ваш .head должен иметь высоту, равную 90% высоты экрана, и что .header-background должен иметь высоту 80% от этих 90%.Кроме того, вы устанавливаете ширину до 90% ширины экрана.Цвет фона по умолчанию для тела - белый.Так что, на самом деле, это не какой-то запас или отступ, который вы видите.Попробуйте установить 100% высоту и ширину, если вы хотите, чтобы серая область охватывала всю страницу.