Is Angular 6 is removing default element margins?

Question

The issue I'm experiencing is that html elements (buttons in the examples below) in Angular 6 seem to be missing their default margin:

Angular 5.2.2 example - has default margin/spacing between the buttons

Angular 6.0 example - is missing the margin/spacing between the buttons

I'm hoping someone can confirm this is an issue with angular - or point me to the root of the problem- before I open a github issue

Answer 1

No, it's not changing the margins. The spaces in the angular 6.0 example are stripped, which would remove the margins between inline-block elements. There's a preserveWhitespaces configuration for angular, which is now (in 6.0 version) disabled by default.

Check this answer for more information: How to globally set the preserveWhitespaces option in Angular to false?

Answer 2

You can try adding preserveWhiteSpace as the space between your buttons is not margin but a whitespace.

@Component({ 
   selector: 'app-employee-list', 
   templateUrl: './employee-list.component.html', 
   styleUrls: ['./employee-list.component.css'], 
   preserveWhitespaces: true 
}) 
export class EmployeeListComponent { 
}

To do it across the application, you can do:

[…] 
"angularCompilerOptions": { 
  "preserveWhitespaces": true 
} 
[…]