Angular 6 是不是正在删除默认元素边距？

Posted 2023-03-05

【中文标题】Angular 6 是不是正在删除默认元素边距？

【英文标题】：Is Angular 6 is removing default element margins?Angular 6 是否正在删除默认元素边距？

【发布时间】：2018-10-26 20:00:27

【问题描述】：

我遇到的问题是 Angular 6 中的 html 元素（以下示例中的按钮）似乎缺少默认边距：

Angular 5.2.2 example - 按钮之间有默认边距/间距

Angular 6.0 example - 缺少按钮之间的边距/间距

我希望有人可以在我打开 github 问题之前确认这是 angular 的问题 - 或者指出问题的根源

【问题讨论】：

Angular 不是 CSS 框架

可能是从模板中删除了非语义空格，这在我升级时改变了一些布局：github.com/angular/angular/issues/23764

【参考方案1】：

不，它不会改变边距。 angular 6.0 示例中的空格被 stripped，这将删除 inline-block 元素之间的边距。 Angular 有一个 preserveWhitespaces 配置，现在（在 6.0 版本中）默认禁用。

查看此答案以获取更多信息：How to globally set the preserveWhitespaces option in Angular to false?

【参考方案2】：

您可以尝试添加preserveWhiteSpace，因为按钮之间的空间不是边距而是空白。

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

要跨应用程序执行此操作，您可以执行以下操作：

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