毛绒框架未对齐

Question

我正在研究3 frames in this codepen，其中框架类似于结构基础形状。我正在测试 3 个元素 span button input 上的每一个，这些元素通过 preset classes 重置。使用dense 和basic 框架的元素垂直对齐，而plush 框架垂直未对齐。 plush 有什么不同导致对齐差异？我需要添加什么来规范化对齐方式？

.frame-dense {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  min-height: 28px;
  padding: 3px 11px;
}

.frame-basic {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  min-height: 36px;
  padding: 7px 15px;
}

.frame-plush {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  min-height: 48px;
  padding: 11px 23px;
}

Answer 1

尝试将.frame-plush 的顶部/底部填充更改为 13px 而不是 11px，如下所示：

.frame-plush {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  min-height: 48px;
  padding: 13px 23px;
}