直接给 button 加 padding 即可，现代浏览器下其默认 display: inline-block 且原生支持 padding，无需额外设 display 或 box-sizing；常见误解是 padding“上下没反应”，实为 line-height 和 vertical-align 导致视觉留白不明显。
直接给 button 加 padding 就行，别绕弯
现代浏览器下 button 默认是 display: inline-block，padding 原生支持，无需额外设 display 或 box-sizing（除非你主动改过全局盒模型）。常见错误是写了 padding: 12px 24px 却觉得“上下没反应”——其实是文字被默认 line-height 和 vertical-align 拉高了，视觉上留白不明显，不是 padding 失效。
padding 值怎么写才不踩坑
用两值语法最稳妥：padding: 12px 20px（上下 12px，左右 20px），兼顾可点击性与紧凑感。别只设 padding-top 和 padding-bottom，单侧调整会让文字在按钮里“飘”，尤其加了图标后更明显。
-
padding: 8px 16px→ 适合小尺寸图标按钮（如购物车图标旁带“+”） -
padding: 12px 20px→ 标准文字按钮（如“加入购物车”） -
padding: 10px 24px→ 图标 + 文字组合按钮（图标占空间，左右需多留 4–8px） - 避免
padding: 4px这类极小值——触控区域不足，iOS Safari 下可能判定为无效点击 - 也别用
padding: 30px这种大值——小屏上容易撑破容器或触发横向滚动
和 border-radius、font-size 搭配时的隐藏冲突
border-radius 不能大于 padding 值，否则圆角会被截断，文字顶到弧线边缘；同时，font-size 变化会改变文字基线位置，若按钮里混用了 <svg></svg> 或 <i></i> 图标，vertical-align: baseline（默认值）会导致底部多出空白，看起来像 padding 不均。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 统一用
vertical-align: middle消除图标对齐偏差 - 设
border-radius: 6px时，padding至少保持 ≥ 8px - 如果用了
rem单位（如padding: 0.75rem 1.25rem），确保根元素font-size已用clamp()或媒体查询适配过，否则小屏下 rem 计算失真
为什么不用 line-height 控制按钮高度
line-height 只撑开文字行距，不扩大点击热区；用户点在文字下方空白处可能无响应。而 padding 真正扩展了整个按钮的交互范围，且兼容 input[type="button"] 和禁用态 :disabled。
- 禁用按钮的
padding依然生效，但颜色变浅后视觉留白易被忽略，建议同步检查对比度 - 若项目中同时存在
input、select和button，别只调button的padding——它们默认内边距不一致（Chrome 中input上下约 1px，button是 2px），要统一就得全量重置
真正容易被忽略的是：购物车按钮常嵌在表格单元格（<td>）或 Flex 容器里，父级的 <code>padding、line-height 或 align-items 会和按钮自身的 padding 叠加作用，调之前先关掉开发者工具里的“布局叠加层”，看清哪一层在真正起效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
