相同尺寸按钮因font-size不同出现对齐异常，是什么原因导致的？

偏移原因 #

• <button> 元素默认属于行内块级元素（display: inline-block），这类元素默认的垂直对齐规则为 vertical-align: baseline，即元素自身的基线要和父级的基线保持对齐。
• 不同字号的文本基线位置存在差异：按钮内部文本字号越小，文本基线相对于按钮整体的位置就越靠上，字号越大基线相对越靠下。
• 即便你给所有按钮设置了完全相同的宽高，只要内部文本字号不同，整个按钮的基线位置就会有偏差，按照默认的基线对齐规则渲染时，自然就会出现上下偏移无法对齐的情况。

常用解决方法 #

你可以通过修改对齐规则快速修复该问题：

1. 给所有按钮统一设置非baseline的垂直对齐属性，比如：

<button style="font-size:16px;line-height:16px;width:120px;height:50px;vertical-align:middle;">スピードボート</button>
<button style="font-size:14px;line-height:14px;width:120px;height:50px;vertical-align:middle;">ローラーコースター</button>
<button style="font-size:16px;line-height:16px;width:120px;height:50px;vertical-align:middle;">ふくろう</button>

vertical-align 可选值还有 top、bottom，可根据你的对齐需求选择。

2. 给按钮的父容器设置flex布局，flex布局默认会让子元素沿交叉轴拉伸对齐，也能直接解决对齐问题：

<div style="display:flex;gap:8px;">
  <button style="font-size:16px;line-height:16px;width:120px;height:50px;">スピードボート</button>
  <button style="font-size:14px;line-height:14px;width:120px;height:50px;">ローラーコースター</button>
  <button style="font-size:16px;line-height:16px;width:120px;height:50px;">ふくろう</button>
</div>

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