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

「作った覚えのない余白ができてしまう!?この余白を消したい！」

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

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

【最初に確認】margin,padding

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

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

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

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

CSSが効かないときの原因特定方法【DevToolsの使い方】

CSSの一部が効かない！何が悪いのかわからない！という方へCSSが効かないの原因特定方法を説明します。

この記事を読む

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

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

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

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

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

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

<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を楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

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

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

【解決方法】line-height:1

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

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

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

<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でバランスをとるといいでしょう。

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

<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の詳しい使い方はこちら↓

CSS display:flexで解決できること9選!

display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。

この記事を読む

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

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

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

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

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

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

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

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

【原因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の基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む