html - 为什么 div 随内容调整大小

Question

我试图在引导框架的帮助下创建一个看起来像按钮的 div。但是当我增加 div 中内容的字体大小时，按钮的宽度和高度会发生变化。我只是想增加字体。但按钮大小应该相同。
这是代码

.bigfatbutton{
    margin-top: 1em;
    margin-bottom: 2em;
    width: 80%;
    margin-left: 2em;
    background: #6130a3;
    height: 4em;
    text-align: center;
    padding-top: 1em;
    color: white;
    font-size: 15px;
}
<div class="bigfatbutton">
    Review & Pay
</div>

注:我只想知道一件事。一些乐于助人的人提到我使用 px 作为填充和边距，而不是我在代码片段中使用的 em。可以吗？我关心的是它将如何影响响​​应能力。请在这方面帮助我。

Answer 1

问题是您要根据字体大小定义边距和填充。 (您在 em 中定义了它们，它等于字体大小。)这可以通过将 em 大小更改为 pt 轻松解决(或 px)。然后你会得到这样的东西:

.bigfatbutton{
  margin-top: 15pt;
  margin-bottom: 30pt;
  width: 80%;
  margin-left: 30pt;
  background: #6130a3;
  height: 60pt;
  text-align: center;
  padding-top: 15pt;
  color: white;
  font-size: 15px;
}

<div class="bigfatbutton">
  Review & Pay
</div>