Please use "Google translate", because I only understand Japanese.
If there is no selector for language selection within the frame with this text, please reload with ctrl key + F5 key.
イメージ

謎の隙間（スペース）を消す方法

みなさん、おはようございますこんにちはこんばんは！ハルです。
今回はmarginやpaddingを設定していないのに出来る謎の隙間（スペース）に関する記事です。
自分では設定した覚えが無いのに出来てしまった隙間が・・・という方が結構多いみたいですね。
はい。私もその一人です（笑）かなり苦労しました。Googleで調べても見つけきれなかった問題が私のコードには潜んでいました。
Googleで調べてすぐ出てくる内容も合わせて記事にまとめましたので、自分に当てはまっていないか調べてみてください。

もくじ

デフォルトスタイルシート

ブラウザなどには初めから設定されているスタイルがあります。これをデフォルトスタイルシートといいます。
例えばW3C(web技術の世界標準を推進している団体)が発行している仕様書では、htmlの「<li>（リストアイテム）」には「display: list-item」が予め設定されていて、リストアイテムを囲む「<ul>（アンオーダードリスト）」には「margin-left: 40px」が設定してあります。
全てのブラウザなどがこの仕様書通りになっているわけではありませんが、スタイルシートを作成していないのに隙間が出来ている時はまずこのデフォルトスタイルシートが働いていないか該当するコードにリセット（margin: 0等初期化）をかけてみて下さい。
また、毎回余白をリセットするのが面倒な方は下記のコードをスタイルシートの先頭行に追加する事で一気にリセット出来るのでお試しあれ！ ＜CSS＞
*{
 margin: 0;
 padding: 0;
} ちなみに上の「*（アスタリスク）」は全称セレクタとか汎用セレクタというらしいです。

全角スペース

タグとタグの間などに全角スペースがあるとそれを1つの何か（どの様に判断されているかは分かりませんでした）と判断して、その分のスペースを作ってしまうようです。
今回私のコードに潜んでいた問題はこれでした。言葉では説明しにくいので下記のコードを反転させてみて下さい。 ＜HTML＞
<!--全角スペース無し-->
<head>
 <meta charset="utf-8"/>
</head>

<!--全角スペース有り-->
<head>
 <meta charset="utf-8"/>　
</head> 文字コードを設定するタグの後ろに全角スペースが潜り込んでいるのが分かると思いますが、これが悪さをしていました。
head内しか調べて検証していないのですが、タグの前後関係なくタグ外に全角スペースを入れると隙間が出来るようです。

改行

タグとタグの間などに改行があるとこれまたスペースが出来る場合が有るようです。htmlコードの中ではエンターキーでの改行が半角スペースとして認識されるので見た目と実際では下記のような隔たりがあります。 ＜HTML＞
<!--見た目-->
<li>リスト1</li>
<li>リスト2</li>

<!--実際にブラウザに反映させると-->
<li>リスト1</li> <li>リスト2</li> こちらは「<table>（テーブル）」や「<img>（イメージ）」などで良く発生させてしまう問題のようです。

まとめ

かなり苦労しました。スタイルシートやJavascriptを消してみたり記事を全部消しても治らず最後にhead内を一行づつ消していて今回の問題をやっと解決出来ました。
この他にも画像の場合「vertical-align」で画像の下に隙間が出来たりなど様々な理由で謎の隙間は出来るようです。
今回の記事の全角スペースはGoogleで検索するワードが思いつかず、記事にたどり着けなかったのでたまたまこの記事に辿りつた方の参考になれば幸いです。
それでは今回はここまで。また次回更新時もお付き合い頂けるとうれしいです。
ありがとうございました！

付録

最後に参考資料のリンクをまとめておきました！

W3Cデフォルトスタイルシート
→HTML4のためのデフォルトスタイルシート
全称セレクタ
→全称セレクタ-CSS｜MDN

タグ： HTML・CSS

公開年月日：2017年12月22日
更新年月日：2022年03月27日