html - 为什么 标签内容的大小会改变它的位置？

Question

我想弄清楚为什么我的按钮没有对齐，我发现这是因为它们内容的大小不同。

这是一个 fiddle :https://jsfiddle.net/ktjboox3/

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

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

你可以看到内容更多的按钮有这种奇怪的顶部边距但不是实际的边距。为什么它们的布局较低？似乎要求它们都具有设置的宽度和高度，但我需要所有按钮的大小相同。

需要说明的是，尽管我确实对让我的代码正常工作很感兴趣，但我正在寻找的实际答案并不是所有按钮都排成一行的代码片段，我想了解这种情况正在发生首先。

Answer 1

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

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

按钮是行内 block 元素，可以设置在与基线相同的水平:vertical-align

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