按钮文字粘连多因letter-spacing设负值，应设为normal；button间空隙常由html换行符导致，推荐flex+gap解决；padding控制内部呼吸感，外间距用margin或gap统一处理。

button 内部文字太挤？先确认是不是 letter-spacing 搞的鬼

按钮文字粘连，90% 不是字体问题，而是 letter-spacing 被设了负值或全局误配。比如有人为“紧凑感”给整个 body 设了 letter-spacing: -0.5px，结果所有按钮里的中文、数字全糊在一起——尤其小字号下，“确”和“认”几乎连笔。

• letter-spacing: normal 是安全起点，不同字体默认值不同，但不会粘连
• 设负值（如 -1px）必须单点控制，只作用于特定按钮，别用在父容器上
• 中文字体对 letter-spacing 敏感，等宽字体（如 monospace）反而变化不明显
• 移动端 Safari 小字号 + 负值易渲染错位，真机测试不能跳过

button 之间有奇怪空隙？不是 margin，是 HTML 换行符在作怪

两个 <button></button> 标签换行写，浏览器会把换行当空格渲染，产生约 4px 不可控间隙——开发者工具里查不到 margin/padding，盒模型里也看不到来源，纯属文本节点遗留问题。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 最稳解法：用 display: flex + gap 替代 inline-block 布局，gap: 8px 直接生效，不依赖 HTML 结构
• 若必须用 inline-block，给父容器设 font-size: 0，再单独给 button 设回正常 font-size（注意 input[type="number"] 等表单控件兼容性良好）
• 删 HTML 换行（<button>A</button><button>B</button>）虽有效，但牺牲可读性，不推荐长期维护

padding 设置不当会让点击区域“虚胖”，反而引发误触

给 button 加大 padding 后再用 display: inline-block，空白字符间隙会被放大，且该空白属于父容器文本流，可能意外响应点击——比如你点“空隙”位置，实际触发了按钮事件。

• 优先用 padding 控制按钮内部呼吸感，横向建议 padding: 8px 16px，避免左右过宽
• 外间距统一交给 margin 或 gap，别混用；margin-right 单侧设比 margin 四边设更可控
• 慎用 line-height 调按钮高度——它本质是行框控制，对单行按钮易导致上下留白不均

响应式场景下，间距单位选 px 还是 em？

按钮内文字间距（letter-spacing）和外间距（margin/gap）单位选择，直接影响缩放一致性。用百分比或 rem 容易在字体缩放时失控，而纯 px 又难适配高 DPR 屏幕。

• letter-spacing 推荐用 px 或 em：前者精准，后者随字体大小缩放（1em = 当前 font-size）
• gap 和 margin 在 Flex/Grid 中优先用 px，避免嵌套缩放干扰；若需响应式，用 clamp() 替代媒体查询，例如 gap: clamp(4px, 1vw, 8px)
• 别用 % 给 letter-spacing，它不按字体大小比例计算，行为不可预测

实际排版中，按钮内外间距常被当成同一类问题处理，但它们分属不同渲染层：内部是字符级排版，外部是盒模型+文本流。混用方案（比如靠 padding 撑开按钮间距）会在高密度 UI（如计算器）里暴露所有隐藏缺陷。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！