CSS Reset

Some browsers impose a margin and padding to elements, that will create inconsistent rendering.

To prevent this, you can perform a CSS reset, by adding the following to your css:

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

But, the above will affect spacing in some libraries, like Angular Material.

So, a better approach, when using Angular Material is to use this reset:

/* Start of CSS Reset
    Perform a CSS Reset that doesn't affect Angular Material 
    The following two blocks margin and spacing for naked elements.
    It will not affect Angular Material elements.
*/

// This Ensures any padding and borders don't affect an element's width/height.
// Specifically, it prevents layout issues when adding padding to elements.
* {
    box-sizing: border-box;
}

// Clear any spacing for naked elements...
// Specifically, this removes default spacing applied by browsers.
body, div, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
/* End of CSS Reset */

NOTE: If you're working in Angular, place the above block near the top of the styles.scss file of your project.

The above will set border-box sizing, so any border and padding don't cause elements to be larger.

As well, it clears spacing for naked elements.

And, any spacing in Angular Material should be unaffected.