Angular 5.2 Material组件：如何去除多余空间并调整mat-tab-label高度

嘿，很高兴你已经搞定了标签宽度的问题！针对mat-tab-label高度偏长的需求，咱们可以通过扩展你现有的CSS代码，添加几个关键属性来精准控制高度，下面是具体的实现方案：

首先，在你已有的样式基础上，新增height和line-height属性，同时确保上下padding足够紧凑：

::ng-deep .mat-tab-label, ::ng-deep .mat-tab-label-active {
  min-width: 60px !important;
  padding: 0 15px !important; /* 上下padding设为0，减少垂直方向的冗余空间 */
  margin: 0 3px !important;
  font-size: 12px;
  /* 核心高度控制属性 */
  height: 40px !important; /* 替换成你想要的目标高度，比如36px、42px都可以 */
  line-height: 40px !important; /* 和height值保持一致，让标签文字垂直居中 */
}

如果调整完标签高度后，发现整个标签栏（mat-tab-header）的高度没有同步适配，导致布局不协调，你可以再加上这段代码，统一标签栏的高度：

/* 可选：同步调整整个标签栏的高度 */
::ng-deep .mat-tab-header {
  height: 40px !important; /* 和上面设置的mat-tab-label高度保持一致 */
}

小提示 #

• line-height的作用是确保标签内的文字垂直居中，避免高度调整后文字出现偏移；
• ::ng-deep虽然在Angular较新版本中被标记为 deprecated，但对于快速解决组件样式穿透的问题，仍然是最直接的方案。如果你的项目追求更规范的样式隔离，可以考虑使用ViewEncapsulation.None或者自定义Angular Material主题，但前者需要注意样式污染的问题。

内容的提问来源于stack exchange，提问作者Calvin Kung