スペース

目次

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

文字と文字の間に半角スペースを複数記述しても、ブラウザで表示するとひとつ分のスペースしか空きません。

HTML
スペースを                     こんなにいれても一つ分しかあかない
表示
スペースを こんなにいれても一つ分しかあかない

手っ取り早い方法としては、全角スペースを用いることで、適度なスペースを空けることができます。

HTML
aaa□□□□aaa
表示
aaa　　　　aaa

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

HTML
aaa    aaa
表示
aaa    aaa

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

HTML
<pre>
aaa        aaa
</pre>
表示
aaa        aaa

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

通常、ページの四隅には空白があり、画像などを並べても少し隙間ができています。この隙間を埋めるには、body に対してスタイルシートを指定します。

HTML
<style>
body { margin: 0; }
</style>

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

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

HTML
<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> の間に次の記述を追加します。

HTML
<style>
body, th, td { line-height: 150%; }
</style>

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

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

まわりの要素
マージン
パディング
テキスト
パディング
マージン
まわりの要素
Copyright (C) 2017 杜甫々
初版： 2003年10月25日、最終更新：2017年12月17日
https://www.tohoho-web.com/how2/space.htm