CSSでHTML内の要素のスペースと物理的な分離を作成する
最初のWebデザイナーは、HTMLでスペースを作成したり要素を物理的に分離したりすることは難しいでしょう。 これは、 HTMLには「空白の崩壊」と呼ばれるプロパティがあるためです。 あなたのHTMLコードに1つのスペースか100をタイプしても、Webブラウザはそれらのスペースを自動的にただ1つのスペースに縮小します。 これは、 Microsoft Wordなどのプログラムとは異なります 。これは、ドキュメント作成者が複数のスペースを追加して、そのドキュメントの単語やその他の要素を区切ることを可能にします。
これは、ウェブサイトのデザインの仕組みがどのように機能するかではない
では、 Webページに表示されるHTMLに空白をどのように追加しますか？ この記事では、さまざまな方法のいくつかについて説明します。
CSSでHTMLのスペース
HTMLにスペースを追加するには、 Cascading Style Sheets（CSS）を使用するのが好ましい方法です。 CSSは、Webページの視覚的な側面を追加するために使用する必要があります。間隔はページのビジュアルデザインの特性の一部であるため、CSSはこれを行う場所です。
CSSでは、マージンまたはパディングのいずれかのプロパティを使用して要素の周りにスペースを追加できます。 さらに、text-indentプロパティは、段落のインデントなど、テキストの先頭にスペースを追加します。
ここでは、CSSを使用してすべての段落の前にスペースを追加する方法の例を示します。 次のCSSを外部スタイルシートまたは内部スタイルシートに追加します。
p {
テキストインデント：3em;
}
HTML内のスペース：テキスト内
テキストに1つまたは2つのスペースを追加したいだけの場合は、非改行スペースを使用できます。
この文字は、標準の空白文字のように機能し、ブラウザ内で崩壊することはありません。
テキストの行内に5つのスペースを追加する方法の例を次に示します。
このテキストには5つの余分なスペースがあります
HTMLを使用する：
このテキストは、＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp; その内部に5つの余分なスペース
また、
タグを使用して余分な改行を追加することもできます。
この文章の最後に5行の改行があります。
なぜHTMLの間隔が悪いのか
これらのオプションはどちらも機能しますが、非改行スペース要素は実際にテキストにスペースを追加し、改行によって上の段落の下にスペースが追加されます。これはウェブページにスペースを作成する最良の方法ではありません。 これらの要素をHTMLに追加すると、ビジュアルスタイル（CSS）からページ（HTML）の構造を分離するのではなく、ビジュアル情報がコードに追加されます。 ベストプラクティスでは、今後の更新の容易さや全体的なファイルサイズやページのパフォーマンスなど、さまざまな理由で、これらが別々になっている必要があります。
外部スタイルシートを使用してすべてのスタイルと間隔を指定する場合、そのスタイルシートを更新するだけで済み、サイト全体のスタイルを変更するのは簡単です。
上の例では、最後に5つの
タグがあるとします。 すべての段落の一番下にスペースが必要な場合は、サイト全体のすべての段落にそのHTMLコードを追加する必要があります。 それはあなたのページを膨らませる余分なマークアップのかなりの量です。
さらに、この間隔があまりにも小さすぎて道路を決めて少し変更したい場合は、ウェブサイト全体のすべての単一の段落を編集する必要があります。 いいえ、結構です！
これらのスペーシング要素をコードに追加する代わりに、CSSを使用します。
p {
パディングボトム：20px;
}
CSSの1行でページの段落の下にスペースが追加されます。 将来その間隔を変更したい場合は、この1行を（サイト全体のコードではなく）編集してください。
さて、あなたのウェブサイトの1つの部分に1つのスペースを追加する必要がある場合は、
タグまたは1つの改行しないスペースを使用することは世界の終わりではありませんが、注意する必要があります。
これらのインラインHTMLスペーシングオプションを使用すると、滑りやすい斜面になる可能性があります。 1つか2つはあなたのサイトを傷つけないかもしれませんが、あなたがそのパスを続けると、あなたのページに問題が起こります。 最終的には、HTMLと他のすべてのWebページの視覚的なニーズに合わせてCSSを使うほうがよいでしょう。