mat-form-field 轮廓间隙问题求助：自定义边框仍存间隙

你遇到的间隙问题，核心是直接给mat-form-field加边框时，没考虑组件内部的结构层级。mat-form-field作为容器组件，内部自带mat-form-field-outline等原生元素，这些元素的默认样式（比如内边距、占位边框）和你自定义的边框叠加，就产生了空隙。

另外你设置的height:51px和padding-bottom:10px，也会挤压内部元素布局，进一步加剧间隙问题。

正确的自定义样式方案 #

不要直接给mat-form-field容器加边框，而是针对组件内部的原生元素做样式覆盖：

1. 隐藏原生轮廓元素（解决默认轮廓异常的根源） #

.template-item-field .mat-form-field-outline {
  display: none;
}

2. 调整内部容器样式，避免间隙 #

.template-item-field {
  width: 200px;
  margin-left: 22.5px;
  margin-right: 22.5px;
  font-family: 'Inter';
  font-weight: 400;
  /* 移除直接给容器加的border、height、padding-bottom */
}

/* 去掉组件默认的外层内边距 */
.template-item-field .mat-form-field-wrapper {
  padding: 0;
}

/* 给输入区域的核心容器加自定义边框 */
.template-item-field .mat-form-field-infix {
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  padding: 0.75em 0.5em; /* 调整内边距适配输入框高度 */
}

3. 适配标签位置（避免标签与边框重叠） #

如果出现标签错位，补充以下样式：

.template-item-field .mat-form-field-label-wrapper {
  top: -1.2em; /* 根据实际布局微调数值 */
}

补充提示 #

优先通过Angular Material提供的内置CSS类覆盖样式，不要直接修改容器的基础样式，否则很容易和组件内部布局冲突。另外可以排查下全局样式或第三方样式，是否有覆盖mat-form-field默认样式，这可能是最初原生outline不显示的原因。

内容的提问来源于stack exchange，提问作者Tim Launders