HTMLでの空白

HTMLでは半角スペースや改行がいくつ続いても半角スペース１個分として扱われます。

説明はしませんが、全角スペース、つまり日本語はこの限りではありません。

つまり、半角スペースを１０個続けた後に「あいうえお」と書いても表示結果は下のとおりですが

全角スペースを１０個続けた後に「あいうえお」と書くとこうなります。

便利ですが、これでは欧米人は困ってしまう。
もちろん半角スペースを使ってでも空白を長く取ることは可能です。
今回は、「HTMLで空白を作る方法、いろいろ」の巻。

そのまんま東示する 「preタグ」

preタグというのがあって、<pre>から</pre>の間に書かれた事は書いたまんまに表示します。
つまり先ほどのように半角スペースを１０個並べても、通常は空白は出来ませんが、

<pre>          あいうえお</pre>

と書くと、こんな風にそのまんま表示されます。

          あいうえお

全角スペースは西洋の文字には出てこないので、万国共通の表示をさせるには、半角で入力するほうが望ましいです。

半角スペースの代わり 「エンティティ &nbsp;」

&nbsp;は半角スペースのエンティティです。
エンティティの説明はハートマークを表示するの巻を見て欲しいのですが、
この&nbsp;をたくさん並べても個数分の空白は作れます。（ただし幅がpreとは変わってしまうようです）

表示結果

しかし、これが単にレイアウトとして空間が欲しいだけなら、別の方法があります。
データとして無意味な半角スペースを入れるよりもこれから説明するやり方の方がいいです。

隙間レイアウト 「marginとpadding」

marginは自分自身と、自分以外の間隔指定に使います。
「あいうえお」という文字の左に５センチ空間が欲しいなら

と書けばＯＫです。

実行結果

paddingは自分自身の内側の隙間です。

表示結果
paddingがゼロの状態

表示結果

marginとpaddingの指定の仕方は以下の通りです。

数値を２つ指定した時は１つ目の値が上下の値、２つ目の値が左右の値になります。
数値を４つ指定した時は１つ目から順に上、右、下、左の値となります。