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

ウェブサイトやブログで div タグの中に配置した文章の上下に余白が出てしまい見栄えが悪い事象が発生したときに、CSS(スタイルシート)を利用して上下の余白を除去する方法を紹介する。

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




1.上下に余白がある状態


上下に余白がある状態とは、下図のように文章の上下に空白が出来てしまう状態である。
図はブラウザの開発者モードで状況を確認したもので、青色のフィルタに覆われた div タグ内に空白があり、div タグの中の文章の前後には改行タグや CSS で maring や padding といった余白の設定は行っていない。

div タグ内で上下の余白がある状態




2.上下の余白を CSS で除去する方法


div タグ内にできた上下の余白を除去するには CSS(スタイルシート)を用い、CSS を設定して上下の余白を消したものが下図となる。

div タグ内で上下の余白を除去した状態


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

<div class="item-box-right">
(略)
</div>


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

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


関連記事