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

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

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

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

.example-title{
	border-bottom: 1px solid #333;
	background: #ff6347;
	}
<span class="example-title">これが span で指定した場合</span>
これが span で指定した場合

「span」だと文字数に合わせてボーダーの横幅が決まります。
同じものを「div」で指定するとブロック要素になってしまうので、横幅いっぱいに広がります。

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

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

.example-title-2{
	border-bottom: 1px solid #333;
	background: #ff6347;
	padding: 10px;
	margin:  30px;
	}
これが span で指定した場合

span の場合、padding は上下左右に効きますが、margin は左右にしか効きません。
一方、div の場合は padding margin ともに上下左右に効いています。

div で指定するとこうなります

上下に 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 要素で指定しています

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


コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

New Post



Random


CLOSE