HTMLにスペースを挿入する方法

フロントエンド開発では、ページにスペースを追加する必要がある場合がありますが、どのように追加すればよいでしょうか?この記事ではHTMLページにスペースを挿入する方法を紹介しますので、ご参考になれば幸いです。 [関連ビデオ チュートリアルの推奨事項: HTML チュートリアル ]

1. HTML ページにスペース

を入力します。 「スペース」キーを入力するとスペースを挿入できます。

例: p.p1 に 1 つのスペースを入力し、p.p2 に 5 つのスペースを入力します。注：このとき「スペース」は半角で入力してください。

<p class="p1">测试文字| php中文网！</p>
<p class="p2">测试文字|     php中文网！</p>

効果画像：

1を入力しても「スペース」と入力しても表示されます。 HTML 内のスペース、または 5 つのスペース、またはその他の複数のスペースがある場合、Web ブラウザーはこれらのスペースを 1 つのスペースに自動的に折りたたみます。

では、複数の入力されたスペースを表示するにはどうすればよいでしょうか?全角の状態で「スペース」キーを入力できます。例:

<p class="p1">测试文字|　php中文网！</p>
<p class="p2">测试文字|　　　　　　php中文网！</p>

効果画像:

注: 全角スペースは漢字として解釈され、空白は漢字の形で表示され、実数で表示されます（数ある限り表示されます）。

または、

 タグを使用してこの問題を解決します (「スペース」を半角で入力します)。例: </p><pre class="brush:html;toolbar:false"><p class="p1">
    <pre class="brush:php;toolbar:false">测试文字| php中文网！

测试文字|     php中文网！

レンダリング:

2. html のスペース文字を使用する

HTML でスペースを表す文字エンティティを使用して、HTML ページにスペースを挿入できます。スペースを表す文字エンティティを見てみましょう。 HTML 内:

文字: 連続した空白スペース。このスペースの幅はフォントの影響を受けます。

 文字: 全角モードで「スペース」キーの半分 (漢字の半分の幅) を入力します。

 文字: 全角モード (漢字 1 文字の幅) で「スペース」キーを入力します。

効果を見てみましょう:

<p class="p1">测试文字|  字符nbsp显示空格！</p><br /
<p class="p2">测试文字|&ensp;字符ensp显示空格！</p><br />
<p class="p3">测试文字|&emsp;字符emnsp显示空格！</p>

レンダリング:

# 説明:   と  占有幅は基本的にフォントの影響を受けず、非常に堅牢です。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がHTMLにスペースを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。