文字数と背景の長さをそろえる

widthで幅を指定しないと(a)のようになってしまうから、(b)のように文字数によって要素の幅が可変するものを作りたい

実際HTML/CSSを書いてみる

<h1>header title</h1>

• まずwidthにemで指定

h1 {
	background-color: gray;
	width: 12em;
}

背景はみ出まくり。。。
前記事【1emの・・・幅？ - Lv.1ノンプログラマの誰得メモ】の通り、文字数と幅指定はあまり関係ないみたい

• 次にwidthにautoで指定

h1 {
	background-color: gray;
	width: auto;
}

widthをautoにしても意味が無いみたい？

そこで使うのが、displayプロパティ

h1 {
	background-color: gray;
	display:inline;
}

じゃーん！！

displayプロパティの値をinlineにすることで、本来ブロック要素である<h1>をインライン要素として動作させます。することで、どんな文字数になってもご覧の通り！！

ただし、h1はインライン要素になってるので、前後にインライン要素をつけて

<h1>title</h1>
<a href="index">これはリンクです</a>

としてしまうと

このようになってしまいます
なので、divのようなブロック要素で囲むことによって

<div><h1>title</h1></div>
<a href="index">これはリンクです</a>

これでオッケー！