-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:

Improve this question
5
  • Create a stackblitz example Commented Jun 20, 2020 at 7: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.. Commented Jun 20, 2020 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 Commented Jun 20, 2020 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). Commented Jun 20, 2020 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. Commented Jun 20, 2020 at 19:03

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-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..

Improve this answer

6 Comments

use a div and try this one w3schools.com/code/tryit.asp?filename=GFYUDH1I61MZ
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.
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..
@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.
I tried to edit the code used by you from here - stackblitz.com/edit/… 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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.