Unknown space in angular component

user_8380606 0
Viewed 2013

I've just started learning Angular 6. I created a simple Angular app in which I created a header-component.

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;
}

When I run ng serve I see a white spacing at the top, left and right I'm not sure what it is. I have double checked padding and margin is 0px.

I'm adding a screenshot screenshot.

Here you can see that there is white space at the top, left and right outside my .head's border. I have also added bootstrap@3.7.7 in my project file.

Pls provide the solution and also state the reason why I'm facing this problem.

This is the space I'm talking about.

enter image description here

angular css html
2 Answers

My guess would be that you don't have configured style encapsulation in your header component. If you have styles in your components stylesheet file, by default those files are only applied to your component template. This means that your first rule does not apply to the body of the page, but only for every tag in your header component.

If this the case you can fix it in two different ways:

  1. Move your first style (the one with the * selector) into your applications main style.css.
  2. Change your component so it sets view encapsulation to none.

To do the change the view encapsulation, you simply need to add one line to your component decorator:

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

The import should be

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

It's because you have declared that your .head should have a height equal to 90% of the screen height and that .header-background should have 80% height of that 90%. Also, you are setting the width to 90% of the screen width. The default background color of the body is white. So in fact, it's not any margin or padding that you see. Try setting 100% height and width if you want the gray area to cover the whole page.

user_100339990
Related