ホームへ

【html/CSS】謎の隙間の原因,空白をなくす方法7選

2022年09月12日

「作った覚えのない空白、スペースができている!?この余白を消したい!」

謎の隙間の原因および、その空白をなくす方法を解説します。

原因は多岐にわたるため症状に合わせて確認してください。

【最初に確認】margin,padding

空白ができたとき、まず疑うべきはmarginとpaddingです。

marginは要素の外側に、paddingは内側に空白を作るCSSです。

空白ができた子要素、親要素も含め、marginとpaddingがないか確認しましょう。

確認するときはDevTollsを使いましょう。

下記はデフォルトでmarginやpaddingが設定されているhtmlタグです。

自分で設定したつもりはなくても最初から設定されているため要注意です。

  • body
  • ul
  • p
  • table
  • th,td

tableについてはcellspacingとcellpaddingの設定を確認しましょう。

【解決方法】margin:0;padding:0

marginやpaddingで隙間ができていることが特定できたら、その要素のmarginやpaddingを0にしましょう。

pにmarginの指定がある

pタグ

<style>
.example{
    background: #ff8d8d;
    overflow: hidden;
}
.example p{
    background: #d9d100;
    /*コレ*/margin: 0.5em 0;
}
</style>
<div class="example">
    <p>pタグ</p>
</div>

pのmarginを0に

pタグ

<style>
.example2{
    background: #ff8d8d;
    overflow: hidden;
}
.example2 p{
    background: #d9d100;
    /*コレ*/margin: 0;
}
</style>
<div class="example2">
    <p>pタグ</p>
</div>

また、marginの上下は相殺されたり、親要素からはみ出る特性があります。

marginの上下の仕様についても確認しておきましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

【文字の上下の隙間】line-height

line-heightは行間を指定するCSSです。

これが1より大きいと文字の上下に隙間ができます。

【解決方法】line-height:1

line-height:1を指定すると文字の上下の隙間が無くなります。

ただし、2行以上になったとき、読みづらくなるため、よく考えて調整しましょう。

line-height:2(上下の隙間あり)

<style>
.example3{
    line-height: 2;
}
</style>
<input type="button" value="ボタン" class="example3">

line-height:1(上下の隙間なし)

<style>
.example4{
    line-height: 1;
}
</style>
<input type="button" value="ボタン" class="example4">

【文字の左右の隙間】letter-spacing

letter-spacingは文字の左右間の隙間を指定するCSSです。

letter-spacingは各文字の右側に隙間を作ります。

【解決方法】padding-left

letter-spacingによってできた最後の文字の右側が気になる場合、それ自体を消すことはできないため、要素のpadding-leftでバランスをとるといいでしょう。

letter-spacing:1emによって右端に空白がある

<style>
.example5{
    letter-spacing: 1em;
}
</style>
<input type="button" value="ボタン" class="example5">

padding-left:1emで左にも空白を作りバランスをとる

<style>
.example6{
    /*コレ*/padding-left: 1em;
    letter-spacing: 1em;
}
</style>
<input type="button" value="ボタン" class="example6">

【画像の下の隙間】vertical-align:baseline

画像の下にスペースができるのは画像がインライン要素かつvertical-align:baseline(初期値)が指定されているためです。

未指定(隙間あり)

<style>
.example7{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
</style>
<div class="example7">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

【解決方法】vertical-align:topかdisplay:block

imgにtopかmiddleかbottomのvertical-alignを指定するか、display:blockを指定すると画像の下の余白は消えます。

vertical-align:top

<style>
.example8{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
.example8 img{
    /*コレ*/vertical-align: top;
    /*middleかbottomも可*/
}
</style>
<div class="example8">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

display:block

<style>
.example9{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
.example9 img{
    /*コレ*/display: block;
}
</style>
<div class="example9">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
</div>

【インライン要素の左右の隙間】ソースの改行

画像やボタンなど、インライン要素、inline-block要素を横並べしたときに左右に空白ができることがあります。

これはhtmlソースを改行していることが原因です。

<style>
.example10{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
</style>
<div class="example10">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <input type="button" value="ボタン">
    <input type="button" value="ボタン">
</div>

【解決方法】改行しないか親にdisplay:flex

htmlソースを改行せずに記述すると隙間が無くなります。

<style>
.example10{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
</style>
<div class="example10">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><input type="button" value="ボタン"><input type="button" value="ボタン">
</div>

改行自体をコメントアウトすると隙間が無くなります。

<style>
.example10{
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
</style>
<div class="example10">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><!--
    --><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><!--
    --><input type="button" value="ボタン"><!--
    --><input type="button" value="ボタン">
</div>

親要素にdisplay:flexを指定して横並べすると隙間なく並べられます。

<style>
.example11{
    /*コレ*/display: flex;
    align-items: flex-end;
    border: 1px solid #333;
    background: #add6ff;
    width: fit-content;
}
</style>
<div class="example11">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <input type="button" value="ボタン">
    <input type="button" value="ボタン">
</div>

display:flexの詳しい使い方はこちら↓

【はみ出ている】親の幅を超えている

スマホ幅にしたとき、右に隙間ができている、というときはどこかの要素が親要素の幅を超えている可能性があります。

下記の方法でどこがはみ出ているのか特定しましょう。

  1. DevToolsを使ってスマホ幅にする
  2. html側で大きなdivごとに消す
  3. 横スクロールがなくなったら最後に消したdivが犯人
  4. F5でリセット
  5. そのdivの子要素を同様に消してさらに絞り込む

ただし、犯人が複数ある場合もあります。

上記をなんどもやって絞り込みましょう。

【解決方法】親の幅以下にする

子要素の合計幅を親の幅以下にすればはみ出ることなく収まります。

下記はよくある はみ出す原因です。

【原因1】width:100%とbox-sizing:border-box

まず、子要素の合計幅が100%より大きいとはみ出ます。

px指定しているときは「max-width:100%」など指定し、スマホ幅になっても横幅が親要素を超えないようにしましょう。

widthは通常、paddingとborderを含みません。

width:100%と指定していてもpaddingとborderの幅分はみ出してしまいます。

「box-sizing:border-box」を指定するとwidthにpaddingとborderを含むため、「width:100%」ではみ出なくなります。

【原因2】display:flexとflex-wrap:nowrap

display:flexで横並びするとき、flex-wrap:nowrap(初期値)が指定されていると改行されません。

横幅が小さくなった時、改行されないことで横幅が大きくなり、はみ出ます。

display:blockにし、横並びを解除するか、flex-wrap:wrapで改行しましょう。

改行するときは子要素のwidthもしっかり指定しましょう。

【原因3】white-space:nowrap

white-space:nowrapは文字を改行させないCSSです。

横幅が大きいときは気にならなくても狭くなるとこれのせいで横幅をはみ出ることがあります。

スマホ幅になったときにはwhite-space:wrapにして改行させるようにしましょう。

【原因がわからない】全角スペース

全角スペースがあると空白ができます。

これはhtmlタグの外側にあっても有効です。

htmlタグの前に半角スペースでインデントを作るかと思いますが、これが全角スペースだと隙間になってしまいます。

全角スペースは非常に見つけづらい原因の一つです。

下記は2番目の</li>の後に全角スペースがある例です。

  • リスト
  • リスト
  •  
  • リスト
<ul>
    <li>リスト</li>
    <li>リスト</li> <!--←ここに全角スペース-->
    <li>リスト</li>
</ul>

【解決方法】書き直す

全角スペースを見つける方法の一つには、画面を全部反転させる方法があります。

謎の空白がある場所に文字一つ分の空白があれば全角スペースが原因です。

ただし、これでも見つけるのは困難です。

あとは謎の空白がある部分を全部消して、書き直すという方法もあります。

コピペではダメです。全角スペースもコピーしてしまい解決しません。

書き直すのがメンドウと思うかもしれませんが、原因を特定するより早く解決することがあります。

【まとめ】謎の隙間の原因と空白をなくす方法

  1. 【最初に確認】margin,padding
    →margin:0とpadding:0
  2. 【文字の上下】line-height
    →line-height:1
  3. 【文字の左右】letter-spacing
    →padding-leftでバランスをとる
  4. 【画像の下】vertical-align:baseline
    →imgにvertical-align:top
    →imgにdisplay:block
  5. 【インライン要素の左右】ソースの改行
    →htmlソースを改行しない
    →親にdisplay:flexで横並び
  6. 【はみ出ている】親の幅を超えている
    →親の幅以下にする
    【原因1】width:100%とbox-sizing:border-box
    【原因2】display:flexとflex-wrap:nowrap
    【原因3】white-space:nowrap
  7. 【原因がわからない】全角スペース
    →文字を反転させて見つける
    →書き直す

以上、謎の隙間の原因と空白をなくす方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ