Since some time my buttons do not have their set margins anymore.
Today I looked at it a little bit more and saw that the generated buttons seem to have an whitespace in them, which adds an additional margin to their design.
How it looks in the designer:
How it looks in the browser:
Inspector:
PS: additionally there is a margin at the bottom in the designer which isn't there in the browser, but that's not really a problem, since the designer is a preview only
This could be Angular's preserveWhitespace feature. You can try disabling it by editing the main.ts file of your application (add it to the ignore list first).
platformBrowserDynamic().bootstrapModule(AppModule, {
preserveWhitespaces: false
});
Works like a charm. Thank you.
Additional info:
There is a second file which needs to be edited if your project works with Ahead-of-time compilation.
It's tsconfig.json (angularCompilerOptions.preserveWhitespaces)