【CSS】font-sizeの変更によるボタン幅が変わる理由について

aタグを使用してボタンを2つ作成したのですが、その際にbackgroundも色付けしてみると、font-sizeによってボタンのリンク有効幅(バックグラウンド範囲)が変わります。
widthは200pxで固定しているので、font-sizeが変わってもボタン幅は変わらないと思っていました。

これはどういった理由によるものなのでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title></title>
6	<link rel="stylesheet" href="main.css">
7</head>
8<body>
9	<a href="#" class="button-link">ボタンリンク</a>
10	<a href="#" class="button-link2">ボタンリンク2</a>
11</body>
12</html>

CSS
1a {
2	background: #ffd700;
3	display: block;
4	width: 200px;
5	margin: 40px auto;
6	padding: 1em;
7	text-align: center;
8}
9
10a.button-link {
11	background: #ffd700;
12	color: #ff4500;
13	font-size: 40px;
14}

kei344

2020/10/14 13:47

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Kkurenai

2020/10/14 13:53

kei344さんご指摘ありがとうございます。ベストアンサーおよび解決済の対応をいたしました。

行動規範の内容に同意します

回答2件

ベストアンサー

単位の em は親要素のフォントサイズを基準とする相対長になります。
上のボタンはフォントサイズ40pxなので、1emは40px
下のボタンはフォントサイズは既定のサイズの16px（ブラウザや設定で変わる場合がある）になるので1emは16pxになります。

widthは200pxで固定しているので、font-sizeが変わってもボタン幅は変わらないと思っていました。

widthは既定ではパディング、境界線は含まないコンテンツ（中身）の幅を設定します。
パディング、境界線を含めて幅を設定したい場合は、box-sizing: border-box;を設定するといいでしょう。こうしておけばwidth: 200px; でボタン幅（ボタンのリンク有効幅）は200pxになります。

box-sizing - CSS: カスケーディングスタイルシート | MDN

下記のように全要素に対して設定しておく幅の計算方法を統一できるので紛れないのでお勧めです。

css
1* {
2  box-sizing: border-box;
3}

投稿2020/10/13 23:39

編集2020/10/13 23:43

hatena19

総合スコア33715

Kkurenai

2020/10/14 12:32

hatena19さんご回答ありがとうございます。また、参考リンクおよび記入例までありがとうございます。ご教示いただきました『box-sizing: border-box;』を記入したところ、解決いたしました。なお、ご教示いただいた内容で、1点お伺いしたいことがございます。＞単位の em は親要素のフォントサイズを基準とする相対長になります。＞上のボタンはフォントサイズ40pxなので、1emは40px とのことですが、この場合フォントサイズはaタグで設定したため、その親要素はbodyになり、そうなるとbodyのフォントサイズは16pxで1emは16pxになるのではと思いましたが、違うということでしょうか？

hatena19

2020/10/14 12:51

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units 上記の中に、 > em 親要素のフォントサイズ. と説明されています。この親要素という表現はちょっと誤解を生みやすいかもしれませんね。例えばaタグ内のテキスト（コンテンツ）から見れば、親要素はaタグです。ですのでaタグに font-size: 40px; と設定されていればテキストのサイズは40pxになります。 padding や border はaタグの属性です。 padding や border から見れば親要素はaタグということになる、という解釈なのだと思います。

Kkurenai

2020/10/14 13:28

追加の質問にご回答いただきありがとうございます。そういう解釈になるのですね。ネットで探してもピンポイントな説明が見つからなかったので助かりました。

行動規範の内容に同意します