CSS拉环按钮右侧添加图标与a链接多余空白去除问题咨询

问题根因 #

你遇到的上下留白问题主要来自以下几处问题：

• 代码拼写错误：display: inner-block 为无效属性，正确应为 inline-block；wdith: 100% 拼写错误，正确为 width: 100%，两个错误都会直接导致布局异常
• 行内/行内块级元素默认带有字体继承的行高（line-height），即使上下padding设为0，默认行高也会撑开高度形成上下留白
• 你写的align-items、justify-content属于flex布局专属属性，但未设置display: flex，两个属性不生效，无法控制内容垂直对齐

修复方案 #

方案1：保留行内块布局，手动控制行高 #

给a.button添加line-height: 1属性抵消默认行高的影响，同时修正拼写错误即可：

a.button {
  /* 修正拼写错误 */
  display: inline-block;
  width: 100%;
  padding: 0 4.5em 0 1em;
  /* 新增行高控制消除留白 */
  line-height: 1;
  background: linear-gradient(90deg, #7D80DA, #8EEDF7);
  font-weight: 800;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  box-shadow: inset -35px 0px 0px #7d80da;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

如果仍有细微留白，可以微调line-height数值直到符合预期。

方案2：改用flex布局，对齐更可控 #

将display改为flex，你原本写的对齐属性即可生效，自动处理垂直居中，彻底消除多余留白：

a.button {
  /* 改为flex布局 */
  display: flex;
  width: 100%;
  padding: 0 4.5em 0 1em;
  background: linear-gradient(90deg, #7D80DA, #8EEDF7);
  /* 以下两个flex对齐属性生效 */
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  box-shadow: inset -35px 0px 0px #7d80da;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

如需调整按钮整体高度，直接给a.button添加height属性即可，内容会始终保持垂直居中。

另外你HTML代码里的<span>标签未闭合，如果没有实际用途可以直接删除，不影响当前布局效果。

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