直接给 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 不均。

Wechat Article Html

将 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 叠加作用，调之前先关掉开发者工具里的“布局叠加层”，看清哪一层在真正起效。