些細な日常inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype
