CSS で div タグ内の上下にできる余分な空白を除去する方法

[最新更新] 2023年11月22日
[初回公開] 2021年09月05日

ウェブサイトやブログを HTML でレイアウトする際に div タグの中に配置した文章や画像の上下に余白が出ることがあり、余白を無くしてデザインや配置の調整を行いたい場合に CSS（スタイルシート）を利用して上下の余白を除去する方法を紹介する。

１．div タグ内に上下の余白がある様子

div タグ内に上下に余白がある状態とは、下図のように文章の上下に空白が発生することである。
ブラウザの開発者モードを利用すると div タグがどこまでの範囲か視覚化することができ、下図でも div.item-box-right 内に上下の空白があるのが確認できる。

div タグの中の文章の前後には改行タグや CSS で maring や padding といった余白の設定は行っていないため、ブラウザの描画において空白が生じていることになる。

２．div タグ内に上下の余白ができる原因

div タグ内に上下の余白ができる原因としては、ブラウザが CSS に沿って描画する際に行間が正しく解釈されていないことが挙げられる。
行間とは文字や画像が改行された際に取られる上下の間隔のことである。

CSS の場合は行間を px や em で指定することができ、行間が狭いほど 1 画面に表示できるコンテンツ量は増えるが識字しづらくなる。
反対に行間を広げると読みやすくなるが、縦スクロールが発生して利便性が下がることがある。

３．div タグ内の上下の余白を CSS で除去する方法

div タグ内の上下の余白を CSS で除去する方法としては、CSS の行間を制御する line-height プロパティを利用する。
下図は line-height プロパティを利用して div タグ内の上下の余白を除去した様子である。

まず文章がある HTML ソースは div タグ内にあり、div タグには class 名として item-box-right を付与している。

<div class=”item-box-right”>
（文章や画像などコンテンツ内容）
</div>

次に、この div タグに設定している item-box-right の CSS は次のようになっており、末尾にあるように line-height を指定することで上下の余白を除去することができる。

.item-box-right {
padding: 0px 0px 0px 0px;
background-color: #999;
line-height: 0em;
}

今回は line-height を 0em にしているため行間無しと取り扱われ、div タグ内は余白が全く無い状態である。
もし少し余白を取りたい場合は line-height に数値を与えるか、div 内の余白を padding などで取るとよい。

CSS を実際に書き換えてサーバ上で確認する前にブラウザの開発者モードを利用して上図のように CSS に line-height を追記して余白が消えるか確認することもできるため利用するとよい。

関連記事