スペース

トップ > 逆引きリファレンス > スペース

文字と文字の間に適度なスペース(空白)を空けるには

文字と文字の間に半角スペースを複数記述しても、ブラウザで表示するとひとつ分のスペースしか空きません。下記の□の箇所に全角スペースを用いることで、適度なスペースを空けることができます。

aaa□□□□aaa

全角スペースの変わりに、特殊文字   を用いる方法もあります。

aaa    aaa

<pre> を用いると、半角スペースでも、スペースの個数分隙間をあけることが可能です。

<pre>
aaa        aaa
</pre>

ページの四隅のスペース(余白)を無くすには

画像をページの左上に隙間無く表示させるなど、ページ四隅の空白を無くすには、<body> タグに以下のような属性を追記します。

<body marginheight=0 marginwidth=0 topmargin=0 leftmargin=0>

左右に適度なスペース(余白)を空けるには

テキストの左右に適度な余白(インデント)を空けるには、スタイルシートを用いると便利です。<head>~</head> の間に下記のクラスを定義しておきます。

<style type="text/css">
<!--
.i { margin-left: 3em; margin-right: 3em; }
-->
</style>

そうして、余白を設けたいテキストを <div class=i> で囲みます。

<div class=i>
この部分のテキストは、左右に 3文字分の余白が設けられます。
</div>

行間にスペース(隙間)をあけるには

行間に適度な隙間をあけるには、スタイルシートの line-height を用いると便利です。<head>~</head> の間に次の記述を追加します。

<style type="text/css">
<!--
body, th, td { line-height: 150%; }
-->
</style>

パディングとマージンの違いは?

スタイルシートのパディングとマージンは共に要素の周りの余白を指定するものですが、若干意味が異なります。パディングは要素からボーダーラインまでの余白、マージンはボーダーラインからその周りの要素までの余白を指定します。

あああああああああああああああああああああああああああああああああ
<div style="border:1px solid gray; margin:10px; padding:5px;">あ</div>
あああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああ

Copyright (C) 2003 杜甫々
初版: 2003年10月25日、最終更新:2003年10月25日
http://www.tohoho-web.com/how2/space.htm