テキストボックス (input 要素) やボタン (button 要素)は、 display を inline-block 以外に変更することができません。display: none にはできます。 <button>の中にテキストとアイコンを表示して、上下中央に揃えたいときなど、ボタンに display: flex や display: inline-flex を指定したくなることはありますが、残念ながらできません。 嘘のように思うかもしれませんが、残念ながら本当です。次のサンプルコードで確認することができます。 サンプルコード 結果 デモはこちら span の場合は幅が 100% になっているのに、input や button は幅が変化していません。 display: inline-block から変更できない要素 W3C にこのような記述があります。 When the button
