HTMLでの空白

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

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

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

あいうえお

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

　　　　　　　　　　あいうえお

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

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

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

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

あいうえお

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

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

&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;&ampnbsp;あいうえお

表示結果

あいうえお

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

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

<span style=" margin-left:5cm ;background:#fcf">あいうえお（色は説明用につけただけ）</span>

と書けばＯＫです。

実行結果

あいうえお（色は説明用につけただけ）

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

<span style="padding:0">paddingがゼロの状態＆lt;/span>

表示結果
paddingがゼロの状態

<div style="padding:1em 0 0 5em">上が１文字分のpadding、下はpaddingなし、そして左が５文字分のpaddingという状態で表示。</div>

表示結果

上が１文字分のpadding、下はpaddingなし、そして左が５文字分のpaddingという状態で表示。

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

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

ここにブログの名前を入れます