文字と文字の間に半角スペースを複数記述しても、ブラウザで表示するとひとつ分のスペースしか空きません。
スペースを こんなにいれても一つ分しかあかない
手っ取り早い方法としては、全角スペースを用いることで、適度なスペースを空けることができます。
aaa□□□□aaa
全角スペースの変わりに、特殊文字 を用いる方法もあります。
aaa aaa
<pre> を用いると、半角スペースでも、スペースの個数分隙間をあけることが可能です。
<pre> aaa aaa </pre>
aaa aaa
通常、ページの四隅には空白があり、画像などを並べても少し隙間ができています。この隙間を埋めるには、body に対してスタイルシートを指定します。
<style>
body { margin: 0; }
</style>
テキストの左右に適度な余白(インデント)を空けるには、スタイルシートを用いると便利です。<head>～</head> の間に下記のクラスを定義しておきます。
<html>
<head>
<title>TEST</title>
<style>
.i {
margin-left: 3em;
margin-right: 3em;
}
</style>
</head>
<body>
<div class=i>
左右に空白が付きます。
</div>
</body>
</html>
行間に適度な隙間をあけるには、スタイルシートの line-height を用いると便利です。<head>～</head> の間に次の記述を追加します。
<style>
body, th, td { line-height: 150%; }
</style>
スタイルシートのパディングとマージンは共に要素の周りの余白を指定するものですが、若干意味が異なります。パディングはテキストなどのコンテンツからボーダーラインまでの余白、マージンはボーダーラインからその周りの要素までの余白を指定します。