ボックスサイズを変更せずにフォントサイズを変更する

Question

私は、抱擁されている場合は、フォントサイズを大きくするボタンを作成しようとしています。それはうまくいきますが、フォントが大きくなるとボックス自体が大きくなるという問題があります。 1つの解決策は、固定された高さを持つことができますが、私はそれを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

あなたが固定サイズのdivの中でそれをラップすることはできますか？いずれにしても、バウンディングコンテナ（ボタン自体またはdiv）を修正する必要があるようです。

また、パディングを減らしながらフォントを増やすことで同様の効果を得ることができます。

Answer 3

あなたは#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 4

にline-height: 20px;を追加することによって、単純にこれを達成することができ、このトーマスをお試しください！

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