Css 带换行符的多行HTML输入按钮会添加不需要的边距

我正在写一个有很多按钮的“收银”应用程序。只要按钮值不换行，布局就可以了。如果它被包装到一条新线上，按钮之间的边距就会变大

（如果只有一行文本，它们会很好地对接。）

这些按钮是通过一系列自定义“饮料”对象循环生成的：

---

我该如何让它们正确排列？

哦，我多么讨厌这些小错误/问题

在我的头顶，这是一个垂直对齐的问题吗

--编辑--

是的，垂直对齐。。。尝试顶部/底部垂直对齐，然后查看

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
    vertical-align:bottom;
}

---

你是一个传奇！设置为垂直对齐：中间，世界将再次成为一个美好的地方。

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
}

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
    vertical-align:bottom;
}