为什么<button>标签内容的大小会改变其位置？

Question

我试图弄清楚为什么我的按钮没有排成一行，我发现它是因为它们的内容大小不同。

这是一个小提琴：https://jsfiddle.net/ktjboox3/

＆＃13;

＆＃13;

button {
  width: 75px;
  height: 75px;
}

＆＃13;

<button>
  hello
</button>
<button>
  hello <br />
  hello
</button>
<button>
  hello <br />
  hello <br />
  hello
</button>

＆＃13;

＆＃13;

＆＃13;

你可以看到内容更多的按钮有这个奇怪的上边距但实际上没有实际的边距。他们为什么要低一些？似乎要求它们都具有设定的宽度和高度，但我需要所有按钮的大小相同。

要明确的是，即使我当然对我的代码工作感兴趣，但我正在寻找的实际答案并不是代码片段，其中的按钮都排成一行，我想了解这首先发生了。

Answer 1

＆＃13;

＆＃13;

button {
  width: 75px;
  height: 75px;
  vertical-align: top;/* or middle/bottom/... whatever suits your needs best */
}

＆＃13;

<button>hello</button>
<button>hello
  <br />hello</button>
<button>hello
  <br />hello
  <br />hello</button>

＆＃13;

＆＃13;

＆＃13;

按钮是内联块元素，可以在基线的同一级别设置：vertical-align

https://jsfiddle.net/ktjboox3/5/

Answer 2

如果你仔细观察，你会注意到所有三个按钮的基线（最后一行的底部）（Chrome可能有错误）是垂直对齐的。这是预期的行为，因为vertical-align属性的初始值为 基线 。

要对齐所有按钮的顶部，请将垂直对齐设置为顶部。

button {
  width: 75px;
  height: 75px;
  vertical-align: top;
}

<button>
  hello
</button>
<button>
  hello<br>
  hello
</button>
<button>
  hello<br>
  hello<br>
  hello
</button>