chromeで文字が縦中央に位置しない

Question

困っていること

html, cssでボタンのようなものを実装
↓
chromeだけテキストが上に位置する(FireFoxなどでは中央に位置)

参考資料

参考URL(codepen)
codepen内２のボタンはこちらstackover flowを参考にしてみましたが、上手くいっていないという状態です

コード

1<div class="button">
  予約済み
</div>

2<div class="button">
  <span class="button">
    予約済み
  </span>
</div>

.button{
  font-size: 11px;
  padding: 2px 3px;
  border-radius: 3px;
  color: #fff;
  background-color: red;
  display: inline-block;
  cursor: default;
  
  &__txt {
    display: inline;
    padding: 5px 10px;
  }
}

よろしくお願いいたします。

Answer 1

フォントのブラウザによる解釈の違いだと思います。
line-height: 1;display: inline-block;にして、paddingで調整してみてください。
ちなみにdisplay: inline-block;はpaddingの上下は効きません。

Comments

[kazoogon]

ご回答ありがとうございます。
https://codepen.io/anon/pen/eoJKbE
こちら変更してみましたが、デザインに変わりはないですね。。
css勘違いしてますかね？

[kei344]

下のほうが空間が多い、ということであれば、フォントにはベースラインがあるので、その分の空間では。

【理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その2）Inline Layout─Frontrend Conference | HTML5Experts.jp】
https://html5experts.jp/takazudo/13592/
https://html5experts.jp/wp-content/uploads/2015/03/jap.png