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

我一直在试图创建一个按钮，如果它悬停，它的字体大小会增加。它的工作原理，但问题是，当字体变大时，盒子本身变得更大。一种解决方案可能是固定高度，但我需要它保持为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>

来源

2017-06-17 Marked as Duplicate

设置字体大小的行高，因此将保持不变甚至字体的变化。

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

来源

2017-06-17 14:50:12 slashsharp

你可以用它在一个固定大小的div？无论如何，你似乎需要修复一个边界容器（按钮本身或div）。

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

来源

2017-06-17 14:50:29 pbickford

你可以简单地实现这一目标，通过添加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>

来源

2017-06-17 14:52:52

试试这个托马斯！

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

来源

2017-06-17 14:53:13

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

回答

相关问题