更改字体大小而不更改框大小

Question

我一直在尝试创建一个按钮，如果它悬停，它的字体大小会增加。它可以工作，但问题是当字体变大时，框本身会变大。一种解决方案可能是固定高度，但我需要它保持为auto。

但是一旦字体大小改变，盒子高度就不会再自动改变，而是保持原来的大小。

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>

Answer 1

设置字体大小的行高，这样即使字体发生变化，它也会保持不变。

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 16px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>

Answer 2

您可以通过将line-height: 20px; 添加到#btn 来简单地实现这一点

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 20px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>

Answer 3

你能把它包装在一个固定大小的 div 中吗？一种或另一种方式，您似乎需要修复一个边界容器（按钮本身或 div）。

或者，您可以通过增加字体同时减少填充来获得类似的效果。

Answer 4

试试这个托马斯！

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 22px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>