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

我一直在試圖創建一個按鈕，如果它懸停，它的字體大小會增加。它的工作原理，但問題是，當字體變大時，盒子本身變得更大。一種解決方案可能是固定高度，但我需要它保持爲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

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

回答

相關問題