When the font-size is different buttons are not aligned-CodePudding

I have same size buttons,I want let them aligned.

<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>

However font-size is different, the position of button itself is bit defferent.

Why does this happen??

CodePudding user response：

You need to change the vertical-align property from its default of baseline as two of the three button's text wraps:

button {
  vertical-align: top;
}

<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>

CodePudding user response：

You can wrap it by display: flex;

.button {
  width: 120px;
  height: 50px;
  margin: 0 10px;
}

.wrapper {
  display: flex;
}

<div class="wrapper">
  <button class="button" style="font-size:16px;line-height:16px;">スピードボート</button>
  <button class="button" style="font-size:14px;line-height:14px;">ローラーコースター</button>
  <button class="button" style="font-size:16px;line-height:16px;">ふくろう</button>
</div>