css - CSS：按钮在包含换行文本时得到偏移

Question

我有四个样式完全相同的按钮。其中两个有一个短文本，两个需要换行的较长文本。出于某种原因，带有换行文本的按钮显示得比其他按钮略低。为什么？？？（如果我缩短文本 - 他们排成一行，所以这正是包装的原因）。

这些按钮被放置在一个没有直接应用样式的容器 div 中，并且位于其他一些 div 下方，该 div 是一个包含一些内容的 flexbox 容器。这是 Vue 应用程序的一部分，但我怀疑它有什么意义。

  <div> // no direct styling applied      
        <div class="some-flexbox-container"></div>

        <button class="pop-up-button report-button">CANCEL</button>
        <button class="pop-up-button report-button">APPLY</button>
        <button class="pop-up-button report-button">SAVE CHANGES</button>
        <button class="pop-up-button report-button">SAVE AS NEW REPORT</button>
  </div>

应用于按钮的样式：

.pop-up-button {
    margin: 15px;
    cursor: pointer;
    min-width: 80px;
}
.report-button {
    width: 7rem;
    height: 2.3rem;
    background-color: $gradient-dark-color;
    font-weight: 500;
    color: white;
    border-radius: 5px;
    border: none;
}

我知道我可能可以通过将它们放入 flexbox 容器或其他东西来迫使它们服从，但我真的很想知道，这种荒谬行为背后的 css 疯狂是什么？

标签： css