CODEWITHSUNDEEP
htmlcssangular
user8972341
user8972341

Reputation: 75

Unable to set margins to 0 in angular5

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.

Upvotes: 2

Views: 1316

Answers (2)

Ashraful Islam
Ashraful Islam

Reputation: 1263

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.

Upvotes: 3

user4676340
user4676340

Reputation:

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)

Upvotes: 0

Related Questions