HTML CSS：按钮添加文本后偏移，是什么属性导致该问题？

这个问题的核心原因是浏览器对行内块元素（inline-block）的默认基线对齐规则。

按钮元素默认属于inline-block类型，浏览器会以文本的基线作为对齐基准：

• 当按钮内没有文本时，它的基线就是自身的底部边缘；
• 当按钮内有文本时，基线是文本的基线（通常在文本下方偏下的位置）。

所以当一个空按钮和带文本的按钮并排时，空按钮的底部会对齐带文本按钮的文本基线，导致带文本的按钮看起来向下偏移。而当两个按钮都有文本或都无文本时，它们的基线一致，自然就能对齐。

解决方法 #

可以通过修改vertical-align属性来调整对齐方式，比如设置为top、middle或bottom：

button {
  color: blue;
  background: yellow;
  width: 200px;
  height: 100px;
  vertical-align: top; /* 或者 middle / bottom */
}

也可以用Flex布局来彻底解决对齐问题，给父容器div添加flex属性：

div {
  display: flex;
}
button {
  color: blue;
  background: yellow;
  width: 200px;
  height: 100px;
}

原代码示例 #

CSS代码

button
{
  color: blue;
  background: yellow;
  width: 200px;
  height: 100px;
}

HTML代码

<div>
  <button></button>
  <button>two</button>
</div>

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