読者です 読者をやめる 読者になる 読者になる

ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

普通のCSSボタンとinputボタンのサイズを揃える方法

input type="submit" value="hoge"のようなinputボタンと普通にCSSでスタイリングしたボタンのサイズが合わなかった時のメモ。

inputにはデフォルトで値が設定されているので、それらを解除します。
解除が必要なプロパティは以下のものがあります。

  • border
  • margin
  • padding
  • box-sizing
  • line-height

個人的にline-heightを見落としていてハマってしまいました。
chromeのdeveloper consoleを見るとデフォルトのプロパティが確認できるので、合わない時は地道にデフォルト値を追っていくと良いでしょう。