HTMLでスペースや空白を入れる方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでスペースや空白を入れる方法について、半角スペースとHTML特殊文字、スタイルシートに分け、簡単に解説していきます。

半角スペース

半角スペースでもスペースを作ることができます。

ただし、HTMLでは半角スペースは複数あっても1つ分しか効果がありません。

<p>田中 太郎</p>

上記のコードでは、半角スペースで姓と名の間を開けていますが、1つのみで対応しています。

HTML特殊文字

HTML特殊文字の&nbsp;でもスペースを表現できます。

&nbsp;であれば、複数並べればその分だけスペースが表現されるので便利です。

<p>田中&nbsp;&nbsp;&nbsp;太郎</p>

上記のコードでは、姓と名の間をそこそこ開けたいため、&nbsp;を3つ並べてスペースを表現しています。

スタイルシート

スペースを入れるのに最も一般的な方法はスタイルシートです。

スタイルシートでmarginやpaddingを指定することで、余白を作り、スペースを表現します。

<p><span style="margin-right:10px;">田中</span>太郎</p>

上記のコードでは、姓と名の間を開けたいため、姓をspanタグで囲み、spanタグに右側のmarginを指定し、姓の右側にスペースを作っています。