CODEWITHSUNDEEP
htmlcssangularangular5angular6
Josh C.
Josh C.

Reputation: 295

Is Angular 6 is removing default element margins?

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

Upvotes: 2

Views: 1712

Answers (2)

sabithpocker
sabithpocker

Reputation: 15558

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

Upvotes: 5

Krypt1
Krypt1

Reputation: 1066

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?

Upvotes: 6

Related Questions