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

Could be the removal of non-semantic whitespace from templates, that altered some layouts when I upgraded: https://github.com/angular/angular/issues/23764 — jonrsharpe, May 16 '18 at 17:13

score 6 · Accepted Answer · answered May 16 '18 at 17:13

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?

score 5 · Answer 2 · answered May 16 '18 at 17:13

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 
} 
[…]

Is Angular 6 is removing default element margins?

2 Answers2