HTML上で改行してマークアップするとブラウザで見たときに半角スペースが入ってしまう問題の対処方法

この記事では、HTML上で改行してマークアップするとブラウザで見たときに半角スペースが入ってしまう問題の対処方法について説明します。
display:inlineやdisplay:inline-blockで記述すると以下の例1,2のような問題が発生します。

例1)リスト要素をインラインにした場合

以下のようにリスト要素をdisplay:inline;で記述すると、各要素の間に半角スペースが表示されてしまいます。

See the Pen
list-display-inline by shiakisudev (@shiakisu)
on CodePen.

例2)リスト要素をインラインブロックにした場合

こちらも同じく、以下のようにリスト要素をdisplay:inline-block;で記述すると、各要素の間に半角スペースが表示されてしまいます。

See the Pen
list-display-inline-block by shiakisudev (@shiakisu)
on CodePen.

改修案1

HTML上で改行してマークアップするとブラウザで見たときに半角スペースが入ってしまうということは、HTML上で改行しなければ良いのです。
以下はリスト要素を改行せずにマークアップした例です。

See the Pen
list-display-inline-kaizen1 by shiakisudev (@shiakisu)
on CodePen.

これできれいに半角スペースを取り除くことが出来ました。
ですが、この改修方法ではHTMLに手を加えなければならず、さらに可読性も低下してしまいます。

改修案2

HTMLを修正せず、CSSだけでこの問題を解決するにはfloatを使います。

See the Pen
list-display-inline-kaizen2 by shiakisudev (@shiakisu)
on CodePen.

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選