Angular 6是否移除了HTML元素的默认外边距？

嘿，我来帮你梳理清楚这个问题：这不是Angular本身的bug，而是Angular CLI在从5.x升级到6.x时，默认全局样式的配置变化造成的。

具体原因 #

• 在Angular 5.x的CLI默认项目里，全局样式文件（比如src/styles.css）没有对按钮这类元素的默认外边距做强制重置。浏览器会保留原生的行内元素行为：因为<button>默认是inline-block类型，按钮之间的换行、空格会被解析成空白字符，自然形成视觉上的间距。
• 到了Angular 6.x，CLI默认生成的项目里加入了更严格的CSS重置规则——要么是自带了类似* { margin: 0; padding: 0; }的全局重置，要么是引入了更新版本的normalize.css，这些规则会移除按钮的默认外边距，同时可能影响空白字符的渲染，导致按钮挤在一起。

快速验证方式 #

你可以对比两个项目的全局样式文件：

• Angular 5项目的styles.css通常只有简单的基础样式，不会强制重置所有元素的边距。
• Angular 6项目的styles.css大概率能看到全局重置规则，或者引入了normalize.css的新版本。

恢复间距的解决办法 #

如果想找回按钮间的间距，有几种简单的方式：

• 全局样式配置：在styles.css里给按钮添加默认外边距：

  button {
    margin-right: 0.5em;
  }
  button:last-child {
    margin-right: 0;
  }
  

• 利用Flex布局：给按钮的父容器设置Flex布局，用gap属性控制间距（这种方式更灵活，推荐）：

  .button-group {
    display: flex;
    gap: 0.5em;
  }
  

• 保留空白字符：确保模板里按钮之间留有换行或空格（不过如果全局样式重置了父元素的font-size，可能需要额外调整）。

所以不用急着提GitHub Issue啦，这是CLI默认配置的变化，不是框架本身的问题～

内容的提问来源于stack exchange，提问作者Josh C.