'p'と 'br'タグで空白を作成する

ウェブサイト上のスペースはかなり単純なものと思われます。 しかし、初めてキーを数回試してみると、その情報がページに表示されないようにすると、見た目ほど簡単ではないことがわかります。

Webサイトにスペースを作成する方法はいくつかあります。 最初の2つはHTMLタグです:

...

段落記号は、通常、アイテム間にスペースを入れます。 これは段落区切りとして機能します。

しかし、行の中のいくつかの

は、ページを乱雑にする以外の何もしません。 エディタの中には、スペースを追加する場所に

を置くエディタもありますが、実際には

タグを使用していません。



タグは、テキストの流れに単一行の改行を入れるためのものです。 ただし、空白スペースの長い文字列を作成するために、複数回連続して使用できます。 問題は、スペースの高さと幅を定義することができず、自動的にページの幅になります。

CSSマージンとパディング

Webページドキュメントにスペースを追加するもう1つの方法は、CSSのプロパティマージンとパディングを使用することです。 これは、要素間に必要なスペースを正確に取得するためのより良い方法です。 また、ドキュメント内の垂直方向のスペースだけでなく、それに影響を与えることができます。

非破壊空間()

最後に、 非破壊空間があります。 この文字エンティティは、通常のテキストスペースとまったく同じように動作しますが、ブラウザがそれぞれを個別に処理する点が異なります。

4行を続けて入力すると、ブラウザはテキストに4つのスペースを挿入します。

古いブラウザでは、改行しない複数の空白を表示しない場合があります。

表の非破壊スペースの使用

セルを開いた状態にするために何かをセルに含めないと、テーブルが頻繁に閉じたり壊れたりします。 例:次のHTMLを使用して、30ピクセルガターを含む表を作成します。

このテキストの左側には少量のスペースが必要です。 一部のブラウザでは正しく表示されますが、多くの場合、テーブルの幅の要求は無視され、テキストは左マージンと同じ高さになります。 とてもうるさい!

テーブルの列が途切れないようにするには、改行なしのスペースを使用します。

このテキストの左側には少量のスペースが必要です。 ほとんどのブラウザで正しく表示されます。