Issue
I'm developing a SPA using Angular, and I have specified html, body { height: 100% } and body { margin: 0 } in CSS. In this situation, if I use HTML tags with default margins in a component, such as <h1> tag, the page will overflow.
This seems to be due to the fact that the margin of the first element of body is replaced by the margin of the body, which is different from the behavior in plain HTML. In plain HTML, the top margin of the first element is ignored, and the body never has a margin. However, this behavior is not the case in Angular (or React, to be precise).
What is the cause of this?
Also, is there any way to achieve the normal HTML behavior in Angular?
Samples in Stack Blitz are as follows:
- Plain HTML: https://stackblitz.com/edit/web-platform-x6cd4l?file=index.html
- Angular: https://stackblitz.com/edit/angular-ivy-2yrmkw?file=src/app/app.component.ts
- React: https://stackblitz.com/edit/react-ts-4mdnyl?file=index.tsx
Thanks in advance.
Solution
Looks like it's your HTML version is missing <!DOCTYPE html>, so it's being rendered differently. And the overflow is caused by the H1 having a top margin, causing a margin between the body and html.
Once you've added the doctype you can then set margin-top: 0 for h1 and the problem should no longer exist.
Answered By - Erik Philips
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.