-1

This should be trivial, but I've spent 2 days and have run out of ideas. Whatever I do, I cannot remove the outer white space between the page html/body and the edge of the browser window. I want the page content to be flush with edge.

I'm using Angular CLI 9.1.8. Same issue on Chrome and Edge on Win 10. I created a stackblitz project here to reproduce the issue:

app.component.html:

<!DOCTYPE html>
<html>
  <body>
    How to remove white space between red border and browser edge...
  </body>
</html>

app.component.css:

body, html {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid red;
}

The red 1px border is there just so I can see where they are and will be removed. Here's what it looks like:

enter image description here

I have also tried:

  • display: inline-block;
  • min-height: 100%;
  • height: 100vh;
  • overflow: hidden;
  • css reset: *{ margin: 0; padding: 0; }
  • wrapping body or components in <div>
  • !important at end of each line

I have tried everything in these stackoverflow threads and more:

DV82XL
  • 5,350
  • 5
  • 30
  • 59
  • Create a stackblitz example – David Jun 20 '20 at 07:58
  • @David Stackblitz example created to reproduce the issue. The code provided in the question was sufficient to reproduce the issue with default settings. Thanks for the suggestion. Please unlock the question.. – DV82XL Jun 20 '20 at 12:22
  • 1
    This is because you are adding `body`/`html` tags to your app component, which you should **NOT** do. So the styles that you defined in `app.component.css` are added to the `html` and `body` tags inside your component, not the global ones. Add your styles to `styles.css` and remove the html/body tags fro your app component – David Jun 20 '20 at 16:29
  • @David Adding body{position: absolute; top: 0; left: 0} as suggested in a comment below worked, but you're right, that's a hack and I shouldn't add body/html tags in the app.component.html. I did this because my body's header, main and footer are components, which cannot be called from index.html. I just separated body from header/main/footer and all is good now. Thank you. (btw why was this question locked? It was a legitimate issue and all necessary info was provided). – DV82XL Jun 20 '20 at 18:37
  • I voted to close it 11h ago, before you added stackblitz. True that I did not pay attention close enough to the code. I ve since voted to reopen it. – David Jun 20 '20 at 19:03

2 Answers2

0

The root problem is the <html> and <body> tags in app.component.html. Even though body{margin:0} is applied to the component's <body>, there is as a higher-level <body> in index.html adding the unwanted margin. To fix this, remove <html> and <body> from app.component.html and move the styles to styles.css.

This is what my final solution looks like:

styles.css

body, html {
  height: 100%;
  width: 100%;
  margin: 0 !important;
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <app-root></app-root>
  </body>
</html>

app.component.html

<header>
  <app-main-menu></app-main-menu>
</header>
<main>
  <app-landing-page></app-landing-page>
</main>
<footer>
  <app-footer></app-footer>
</footer>

Note: Another solution was proposed to set body{position: absolute; top: 0; left: 0} in app.component.css. That actually worked, but masked the real source of the problem, which was the misplaced <body> and <html> tags.

DV82XL
  • 5,350
  • 5
  • 30
  • 59
-3

this is before CSS

This is inspecting element

This is before CSS with code

This is after CSS with code

Try to change the margin and padding value of universla selector to zero. If that doesn't work try to change the indivisual value of different element's margin and padding to zero. You can also inspect each element using ctrl+shift+i then find the element which is disturbing the layout.

CSS line will be --

*{
margin: 0;
padding: 0;
}

You must change the padding to 0 also and see if your CSS file is connected to your code.

That's the best i could try..

Utkarsh Tyagi
  • 1,379
  • 1
  • 7
  • 12
  • 2
    use a div and try this one https://www.w3schools.com/code/tryit.asp?filename=GFYUDH1I61MZ – Francesco Jun 20 '20 at 08:35
  • 2
    The CSS is obviously "connected" to the code since the red border is getting applied. As mentioned in the question, I already tried the CSS reset with the wildcard character setting margin to 0. Padding won't change anything because that affects the space inside the border, not outside, which is controlled by margin. – DV82XL Jun 20 '20 at 11:39
  • 2
    bro i am right you have to change the padding of body or universal selector to zero. Try then comment..Because there is no other possible error.. – Utkarsh Tyagi Jun 20 '20 at 13:44
  • 2
    @UtkarshTyagi This was one of the first things I tried. I added links in my question to view or edit a stackblitz project that reproduces the error. I added your suggestion there and you can see that the outer white space is still there. – DV82XL Jun 20 '20 at 15:45
  • 2
    I tried to edit the code used by you from here - https://stackblitz.com/edit/angular-ivy-hzzyzi?file=src%2Fapp%2Fapp.component.html but i found out that there is the error in the editor you are using. It is niether margin nor padding. I suggest you using visual studio code for better results. Also i used a verified code. – Utkarsh Tyagi Jun 20 '20 at 17:55
  • 1
    @UtkarshTyagi There is no error in the editor. The problem was with Angular and where I was creating the html/body tags. The comments to my original question give more info. Thanks a lot for trying though, I really appreciate it! – DV82XL Jun 20 '20 at 19:24