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 で指定するとこうなります</div>
padding や margin はどうなるか確認してみます。
それぞれ上下左右に「padding 10px」と「margin 30px」で指定しました。
.example-title-2{ border-bottom: 1px solid #333; background: #ff6347; padding: 10px; margin: 30px; }
span の場合、padding は上下左右に効きますが、margin は左右にしか効きません。
一方、div の場合は padding margin ともに上下左右に効いています。
上下に margin を取りながら文字数と背景の幅を合わせたい時には div をインライン要素にしてしまいます。
「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 を取ることができます。
- 2015年04月07日
- HTML・PHP・CSS
- css, inline-block