Components: Is normalize.css required?

[davidshen84]

Bug, feature request, or proposal:

Maybe a bug.

What is the expected behavior?

When creating a material-nav component, the menu and the navigation bar should align correctly.

What is the current behavior?

There's a margin at the top of the title bar, but no margin at the top of the menu bar.

What are the steps to reproduce?

I asked a question at https://stackoverflow.com/questions/51258963/angular-material-navigation-bar-not-aligned/51259364?noredirect=1#comment89501187_51259364, and it was solved. But I think it might be a bug.

What is the use-case or motivation for changing an existing behavior?

Want to know if it is really a bug.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

Is there anything else we should know?

[crisbeto]

normalize.css isn't required, but we have a rule that Material shouldn't touch elements that it doesn't "own", hence why we don't reset the margin on the body.

[davidshen84]

So the margin on the top of the navigation bar is expected? I think that looks strange. Maybe I used the material-nav component in a wrong way? But I did not find any special notes on https://material.angular.io/guide/schematics regarding how to use the component.

[crisbeto]

It's expected that you'll reset it yourself.

[davidshen84]

Thanks. At least I now know everything I did was correct, and it's only the result is not what I expected.

[polypus74]

I wish Angular Material had an official reset/normalization story on this aside from "we don't touch what we don't own", which in any case I could only find by digging into github issues. Is there one I don't know of? Even if not prescribed in actual code then at least in best practices and recommendations someplace in the doc. This might be obvious to an experienced/knowledgeable material dev, but it is not at all obvious to a noob how global styles might adversely effect material's styles for example. I chose angular so I didn't have to worry about details like this. Maybe I'm overthinking it, but I dislike the uncertainty, and hours of searching online have not yielded and concrete answers.

[lonix1]

@polypus74 What did you decide to use at the end?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}