Unable to set margins to 0 in angular5

Question

With my app, I currently have only 1 component (the nav) and I have set the CSS for app-root, as well as app-navbar as:

* {
   margin: 0;
}

Despite this, the margins persist; I can't even edit them in chrome web development tools in the browser for some reason, The only way I get the margins to disappear is to go the angular root index.html file, and manually enter the style tags there,

Anything else I apply to the * tag (such as font-family) is applied to the entire document, just not margin for some reason,

If anyone knows why you'd save me from ripping any more hair out.

Answer 1

You can add it in app.coponent.css

* {
   margin: 0;
}

and set encapsulation: ViewEncapsulation.None in component decorator.

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None
})

By setting ViewEncapsulation to None all the styles apply to the entire document. Or in other words, a component could overwrite styles from another component because its styles are applied to the document head later. Otherwise you can use the global style.css file generated in your directory.

Answer 2

When you create a project with the Angular CLI, the CLI creates a global style file, usually under the name style.ext , where ext is the extension you chose (default to css ).

So you should open this default file, let's assume it being style.css , and add those lines in it.

* {
   margin: 0;
}

If I were you, I would also add this to this file :

html,
body {
  height: 100%;
}

This will prevent you from some errors you could encounter later on, if you want to play with heights (I do this in all of my projects)