垂直方向中央に文字を整える場合、heightとline-heightを同時に使用するケースがよくあるかと思います。heightとline-heightの値を同じに指定すると、指定したサイズの垂直方向中央に要素が整います。
ただし、buttonタグのheightとline-heightの値を同じに指定すると、ベースラインが若干下にずれてしまいます。

スポンサーリンク

原因は…なんでしょうねこれ。
buttonの場合は、はじめから垂直方向中央に位置が設定されているので、line-heightで合わせようとすると返っておかしくなってしまうという感じなんですかね。

サンプルではline-heightを指定したパターンと指定していないパターンの両方を作っています。

サンプルページを表示

html

<ul>
<li><button>ボタン1</button></li>
<li><button>ボタン2</button></li>
</ul>
css

button {
	background-color: #EEE;
	border: solid 1px #CCC;
	border-radius: 3px;
	font-size: 1.2rem;
	width: 160px;
	height: 52px;
	line-height: 52px;
}

ソースは簡単にこんな感じに。

サンプルページは上から順に、

・buttonタグにheightとline-heightを指定しているとき
　(上記ソースのまんま)
・buttonタグにline-heightを指定していないとき
　(line-heightを指定していないパターン(ここではline-height:0を指定))
・line-heightを指定したときと指定しいないときの比較
　(1つ目と2つ目を横に並べて比較したもの)

と、しています。

単独で使っているときにはベースラインが若干下がっていることに気づきにくいですが、3つ目のline-heightを指定したときと指定しいないときの比較を見てみると、左側のほうが若干下がっていることに気づけるかと思います。

buttonタグにline-heightの指定をしたのにベースラインが若干下がっているときは、あえて消して確認をしてみると解決できるかもしれないです。

サンプルページを表示

PAGE TOP