HTMLでスペースや空白を入れる方法【現役エンジニアが解説】
今回は、HTMLでスペースや空白を入れる方法について、半角スペースとHTML特殊文字、スタイルシートに分け、簡単に解説していきます。
半角スペース
半角スペースでもスペースを作ることができます。
ただし、HTMLでは半角スペースは複数あっても1つ分しか効果がありません。
<p>田中 太郎</p>
上記のコードでは、半角スペースで姓と名の間を開けていますが、1つのみで対応しています。
HTML特殊文字
HTML特殊文字の でもスペースを表現できます。
であれば、複数並べればその分だけスペースが表現されるので便利です。
<p>田中 太郎</p>
上記のコードでは、姓と名の間をそこそこ開けたいため、 を3つ並べてスペースを表現しています。
スタイルシート
スペースを入れるのに最も一般的な方法はスタイルシートです。
スタイルシートでmarginやpaddingを指定することで、余白を作り、スペースを表現します。
<p><span style="margin-right:10px;">田中</span>太郎</p>
上記のコードでは、姓と名の間を開けたいため、姓をspanタグで囲み、spanタグに右側のmarginを指定し、姓の右側にスペースを作っています。