Change body’s standard 8px margin at Angular 2

Question

Good afternoon, I’m starting with Angular 2 and I’m having a problem to remove the margins of the body from 8px, I tried to include in the body tag of css margin:0, but it came to nothing.

Could you help me?

Here’s the body tag that’s in my css Component app

body,html {  
    margin: 0;
    font-family: "Montserrat Light";
    font-size: 16px;
    height: 100%;
    }

And here the app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

Answer 1

To reset the styles of each browser, it is considered a good practice to use nomalize.css, https://necolas.github.io/normalize.css . Another approach would be to add !important the desired property, but this is considered a bad practice for CSS.

Answer 2

I ended up installing Bootstrap through Angular/cli, I followed the following tutorial: Configuration link

Then I added Bootstrap to index.html:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Worked perfectly well! ;)

Answer 3

After installing normalize.css by typing:

npm install normalize.css

Don’t forget to reference the file in your project. In the case of an angular project you can include the reference in the Styles.css file, depending on the location it would be something of the type:

@import 'node_modules/normalize.css/normalize.css'