How to remove the weird space between an Angular app end the end of the body?

user_6306389 0
Viewed 763

under my Angular app is a weird space. The Space is part of the body tag but it isn't not part of the app-root tag. How can I remove this space?

enter image description here

/*styles.css*/
@import './styles/themes.scss';

@include mat-core();
@include angular-material-theme($material-light-theme);

.dark-theme{
    @include angular-material-color($material-dark-theme);
}

html, body { height: 100%; }
body { margin: 0; font-family: Verdana, Roboto, "Helvetica Neue", sans-serif; }

I already tried this on my App-Component but it had no effect.

app-component.css
:host {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/*app-component.scss*/
bg-intranet-header {
    z-index: 2;
    position: sticky;
    top: 0;
}

I tested it in two browsers (firefox, edge). here are 3 screenshots of the actual interpreted css. enter image description here

enter image description here

enter image description here

angular css html
2 Answers

In styles.css (or styles.scss, ..) you put:

body {
  margin: 0;
}

This must be in that particular file. If it doesn't work, try:

body {
  margin: 0 !important;
}
user_123258960

Try to add this css

css

body {
      margin: 0px !important;
      padding : 0px !important;
    }

* {
    box-sizing: border-box;
  }

i hope i will work fine !

user_141234060
Related