HTMLを読みやすくしようと改行したら、文字と文字の間に、半角スペースくらいのすき間が出る。
原因は、<a>や<span>のようなインライン要素の前後で改行したことです。
ブラウザは、その改行を空白1つとして表示します。
🎥 この記事の内容は動画でも解説しています。
先に結論です。
- インライン要素(
<a>・<span>・<strong>など)の前後は、文の途中なら改行しない - ブロック要素同士の間や、flex・gridの子要素の間は、改行してもすき間は出ない
- 整形するときは、空白以外が変わっていないかを機械で確かめてから、見た目を比べる
HTMLの改行でスペースが入るのは、なんで？
文章の中(インライン要素が並ぶところ)では、改行やタブ、続けて打ったスペースは、まとめて空白1つとして扱われます。
MDNの「ホワイトスペースの処理」のページにも、文の中の改行は空白1つになると書かれています。
英語なら、単語の間にスペースがあるのが普通なので、あまり困りません。
困るのは日本語です。
日本語は単語の間にスペースを入れないので、改行が空白になると、そこだけすき間が空いて見えます。
Chromeで、どれくらいずれるか測ってみた
実際にどれくらいずれるのか、Claude CodeにChrome(155)で幅を測ってもらいました。
フォントはsans-serif、文字の大きさは16pxです。
数字はフォントによって少し変わります。
1行で書いた場合。
<span>詳しくは<a href="#">こちら</a>をご覧ください</span>読みやすく改行した場合。
<span>詳しくは
<a href="#">こちら</a>
をご覧ください</span>結果は、1行のほうが224.0px、改行したほうが234.7px。
10.7px広がっていて、改行2か所ぶんの空白が入っていました。
「価格<strong>1,000</strong>円」でも、97.9pxが108.5pxになりました。
見た目にすると、「詳しくは こちら をご覧ください」のような感じです。
ぱっと見では気づきにくいんですけど、デザインと見比べると、ずれているのが分かります。
改行していい場所、いけない場所
改行していいのは、すき間が出ても表示に影響しない場所です。
- OK:
<p>や<div>のようなブロック要素同士の間 - OK:
display: flexやgridの親の、子要素同士の間(子要素の間の空白は表示されません) - NG: 文の途中にある、インライン要素の前後
- NG:
display: inline-blockの要素同士の間(要素の間にすき間が出ます)
迷ったら、「その改行が、文章の途中にあるかどうか」で見ると分かりやすいです。
自分はこうやって整形してます
1行に詰まったHTMLを読みやすくしたいときは、Claude Codeに整形してもらっています。
そのとき、見た目が変わっていないかを2段階で確かめてもらいます。
- 整形の前とあとで、タグ・属性・テキストが、空白以外は完全に同じかを機械でチェックする
- スマホ・タブレット・PCの3つの幅でスクリーンショットを撮って、前とあとをピクセル単位で比べる
1つめで、タグの消し忘れや書き換えがないかが分かります。
2つめで、改行で入った空白のずれが見つかります。
空白は、1つめのチェックでは「同じ」に見えてしまうんですよね。
なので、2つめの見た目の比較までセットでやる手順にしています。
もう入ってしまったスペースを消すには
いちばん確実なのは、インライン要素の前後の改行を消して、1行に戻すことです。
どうしても改行したいときは、タグの>の直前で改行する書き方もあります。
<span>詳しくは<a href="#"
>こちら</a>をご覧ください</span>タグの中の改行は空白として表示されないので、すき間は出ません。
ただ、読みやすいかというと微妙なので、自分は1行に戻すほうにしています。
まとめ
文章の中のHTMLの改行は、空白1つとして表示されます。
日本語の文の途中で、インライン要素の前後を改行すると、そこにすき間が出ます。
整形するときは、改行していい場所(ブロック要素の間、flex・gridの子の間)だけで改行する。
そして、整形の前とあとで見た目を比べる。
この2つで、だいたい防げます。
文字の間のすき間が気になったら、まずそこにあるインライン要素の前後で改行していないか、見てみてください。
