buttonタグの罠

buttonタグは便利です。input type=”button”よりだいぶいい！

さて、このボタンタグ。inline要素です（html5だとinline要素という表現がおかしい・ない模様です）。それは知ってる。buttonの閉じタグのあとにbrタグを入れないと変な感じになるよね。 inline要素です。

適当に構造を整えたあと、いざcssでデザイン・レイアウトの調整をします。buttonってあの四角いやつですよ。よほど変なデザインでない限り、border属性をつけて整えます。width,heightで大きさ決めて、はいできた！

見てみると、なんかずれてます。多少ずれていても気にしないことも多いですが、きっちり計算してデザインしたはずが、”カラム落ち”みたいな状況になっているとがっかりです。

調べてみると、buttonのサイズ指定がbox-sizing:border-box;を指定したような状態になっているようです。そうですよね。考えてみれば、インライン要素なのにborder、width、heightを指定するというのも変な感じです。

試しにspan要素に対して border、width、heightを指定してみると、よくわからない表示になります。spanタグが通常通り表示され、ボーダーが外にはみでるような形に。

さらによくわからないのは、この状態でfloat:left;とするとspan要素はブロック要素のdivと同じように表示されますが、button要素はdisplay:block;box-sizing:border-box;のような表示になります。

解決策としては、button要素のスタイルをdisplay:block;box-sizing:content-box;float:left;のようにして、サイズの調整は通常のblock要素と同じように行う、というのが迷わなくて済みそうです。