CSS で div の場合でも文字数と背景の幅を揃える

ものすごく基本的なことだったのですが、今更知ったので忘れないうちにメモっておきます。

これまで、文字数の長さに背景やボーダーの長さを合わせるには「span」を使うしかないと思っていました。
でも「span」では上下の margin が効かないんですよね。

例として下のような CSS があるとします。
下線と背景色だけ指定してあります。

.example-title{
	border-bottom: 1px solid #333;
	background: #ff6347;
	}

<span class="example-title">これが span で指定した場合</span>

「span」だと文字数に合わせて、ボーダーと背景の横幅が決まります。

同じものを「div」で指定すると、ブロック要素になってしまうので横幅いっぱいに広がります。

<div class="example-title">div で指定するとこうなります</span>

では、padding や margin はどうなるか確認してみます。
それぞれ上下左右に「padding 10px」と「margin 30px」で指定しました。

.example-title-2{
	border-bottom: 1px solid #333;
	background: #ff6347;
	padding: 10px;
	margin:  30px;
	}

span の場合、padding は上下左右に効きますが、margin は左右にしか効きません。
padding だけが効いた結果、下の文字に被ってしまっています。

一方、div の場合は padding margin ともに上下左右に効きます。

上下に margin を取りながら文字数と背景の幅を合わせたい！
そんな時には div をインライン要素にしてしまいます。

display: inline-block; を使う

「div」要素を「display: inline-block;」にするだけで解決します。
CSSに「display: inline-block;」を追加します。

.example-title-3{
	border-bottom: 1px solid #333;
	background: #ff6347;
	padding: 10px;
	margin:  30px;
	display: inline-block;
	}

<div class="example-title-3">div 要素で指定しています</div>

これで div 要素の背景を文字幅に合わせて、上下に margin を取ることができます。