0

Someone pointed out that I had a white border around my Angular application so I found using the browser's inspector that the body tag had an 8pt margin set on it. But I couldn't find out where it came from. I was able to correct it by overriding the body CSS in the styles.scss file for the project. The result in the Chrome inspector looks like this:

Chrome inspection

But I can't find the source or configuration file anywhere that put the 8px margin there in the first place. What does it mean by "user agent stylesheet"?

The Mozilla inspector does not show this, but the 8px margin is there unless I insert the correction.

Where should I look?

AlanObject
  • 9,613
  • 19
  • 86
  • 142
  • 4
    It's added by default by the browser. – Roy Feb 03 '20 at 18:19
  • @Roy Never knew that before now. I guess Mozilla has a similar default stylesheet. – AlanObject Feb 03 '20 at 19:18
  • user agent styles are the default styles from the browser. Each browser has its own set of default styles per element, which make a reset stylesheet helpful for starting with a common baseline – Scrimothy Feb 03 '20 at 19:18
  • This question is not really about angular, and the title (and tags) should probably be changed to reflect that. (I see that the suggested edit queue is full, so maybe someone else already updated it and it's just pending review...) – Superole Jan 26 '21 at 09:24

2 Answers2

1

Different target browsers have different default CSS rules. The user agent stylesheet reflect those defaults.

Because browsers' defaults differ this way, most reset or normalize CSS for their app. My "go-to" is the NPM normalize.css package. There's also SCSS version if that's your preference. Then I just modify the styles array in angular.json by adding the path to that file in node_modules as the first item in the array. It's important that it is the first item because you want to apply it before you apply your own styles.

Kyler Johnson
  • 1,939
  • 16
  • 14
1

If you only want to modify the margin, for example 0px, just go to the style.scss file and add your custom margin to the body with the !important 'attribute'

body {  
    margin: 0px !important;
}

https://stackoverflow.com/a/9245360/10200325

Fernando Flores
  • 36
  • 2
  • I found that I didn't need the !important qualifier for this to work. The styles.scss is evaluated later and such, takes precedence. – AlanObject Feb 03 '20 at 19:19
  • I was hoping for a solution that would not require a work-around like that. However at least I have something that addresses the issue now. See Klyer Johnson's answer below. – AlanObject Feb 03 '20 at 20:26