buttonタグについて

Question

<button style="height:100px;">ボタン</button>
<span class="button" style="height:100px;">ボタン</span>

buttonタグにかかってるuser agent stylesheetを
.buttonクラスにあてても縦方向の中央揃えになりません。

buttonタグ固有のものでしょうか？

Comments

[退会済みユーザー]

button css の内容を公開すればコメントも付けやすいかと思います。

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

別のCSSがあたっていたりはしないですか？
HTMLだけでなくCSSも載せていただければもう少し確認できるかと思いますが
色々独自のCSSがあたっているような気がするので
ブラウザのDeveloperToolsなどで確認してみてください。

純粋にそれだけ貼るとこうなります。
あとは独自CSSが効いているのではないでしょうか。
https://codepen.io/anon/pen/ZXgRbE

Comments

[matometaru]

ありがとうございます。
cssは以下になります。

align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;

text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 13.3333px Arial;
-webkit-writing-mode: horizontal-tb;
-webkit-appearance: button;

[yuki-saito]

CSSを入れたらこうなりましたので、原因は充てているCSSということになります。
このサイトは便利なので是非使ってください＾＾
https://codepen.io/anon/pen/ZXgRbE

このサイトをDeveloperToolsで見れば色々分かると思いますが
自分で充てているCSSが有効になるとセンタリングになっていない時点で
ご質問の
> buttonタグ固有のものでしょうか？
ということに対する答えは
「固有のものではなく充てているCSSに依存している。」ということになるかと思います。

Answer 2

該当するspanのline-heightもheightに合わせてみてはどうでしょうか？