按钮出现上下空白？CSS代码无法消除该问题技术求助

我看了你的代码，按钮出现空白的核心原因有两个：一是transform: scale()只会视觉放大元素，但不会改变它在文档流中的占位大小，原按钮的尺寸会留在页面上形成空白；二是按钮内部的原始文字没有被隐藏，可能在渲染时和伪元素叠加导致异常空白。

下面是修复后的完整代码，我会逐一解释改动点：

#filter {
  position: absolute; /* 脱离文档流，消除原始占位空白 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(4); /* 先平移再缩放，居中更准确 */
  overflow: hidden;
  padding: 10px 15px;
  border-radius: 5px;
  outline: none;
  border: 1px solid rgb(37, 101, 135);
  background-color: transparent;
  text-indent: -9999px; /* 隐藏原始文字，避免叠加干扰 */
  white-space: nowrap; /* 防止文字换行露出 */
}

#filter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: skyblue;
}

<button id="filter">Filter: Off</button>

关键改动说明： #

• position: absolute + top/left + transform：把按钮脱离文档流，彻底消除原尺寸带来的空白占位；同时用translate(-50%, -50%)配合top:50%;left:50%实现精准居中，比你原来的translate(50%,50%)逻辑更合理（原来的写法会让按钮的左上角在中心，现在是按钮中心在页面中心）。
• text-indent: -9999px + white-space: nowrap：把原始文字移出可视区域，避免它和伪元素背景叠加导致的内部空白或文字露出问题。
• 调整transform顺序：先平移再缩放，确保居中效果不受缩放影响（CSS transform是从右到左执行的，所以translate(-50%,-50%) scale(4)等价于先缩放4倍，再平移缩放后尺寸的50%，这样居中更准确）。

如果你的空白是指按钮内部的间隙（不是文档流占位），那还可以额外加上line-height: 0或者font-size: 0来彻底清除文字相关的内部空白，但上面的改动已经能解决大部分场景的问题了。

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