HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルール HTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続するスペースは自動的に結合されます。同時に、コンテンツの前後のスペースも次のようにクリアされます。 <p> fly63 com </p> 表示効果は次のとおりです。 fly63 com 注: このブラウザ処理のメカニズムは、通常のスペースキーに加えて、タブ (\t) と改行 (\r と \n) にも適用され、タグを使用して明示的に示すことができます。 HTML 空白の保持このとき、HTML 内の連続する複数のスペースを Web ページに表示したい場合、ブラウザは実際のスペースのインデントと改行効果を表示します。一般的に、タブを使用するか、スペースを表すためにを使用するかの 2 つの方法があることがわかっています。次のように： <pre> fly63 com </pre> または  fly63   com  HTML 内のスペースは現在次のとおりです: \| \| \| \|

HTML の空白ルール

HTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続するスペースは自動的に結合されます。同時に、コンテンツの前後のスペースも次のようにクリアされます。

<p> fly63 com </p>

表示効果は次のとおりです。

fly63 com

注: このブラウザ処理のメカニズムは、通常のスペースキーに加えて、タブ (\t) と改行 (\r と \n) にも適用され、タグを使用して明示的に示すことができます。

HTML 空白の保持

このとき、HTML 内の連続する複数のスペースを Web ページに表示したい場合、ブラウザは実際のスペースのインデントと改行効果を表示します。一般的に、タブを使用するか、スペースを表すためにを使用するかの 2 つの方法があることがわかっています。次のように：

<pre> fly63 com </pre>

または

&nbsp;fly63&nbsp;&nbsp;&nbsp;com&nbsp;

HTML 内のスペースは現在次のとおりです: | | | |

		改行なしの空白（1文字幅）
&ensp;		半角スペース（1文字幅）
&emsp;		スペース（2文字幅）
		狭い空白（1文字幅未満）

SSスペース予約済み

1. CSS では、空白プロパティの値が pre の場合、タグと同じように処理されます。ブラウザはテキスト内のスペースと改行を保持します。例:

<p style="white-space:pre"> fly63 com <p>

表示効果は「fly63 com」です

2. CSS の空白プロパティが pre-line の場合、改行を保持することを意味します。改行がそのまま出力されることを除いて、その他すべては white-space:normal ルールと一致しています。

<p style="white-space: pre-line">
	フライ63
	com
</p>

表示効果は次のとおりです。

フライ63
com

3. CSS の letter-spacing プロパティは、テキスト内の文字間の間隔を設定するために使用されます。例:

<p style="letter-spacing:5px;">ようこそ！ </p>

表示効果は「ようこそ！」です。

4. CSS の word-spacing プロパティは、テキスト内の単語間の間隔を設定するために使用されます。例:

<p style="word-spacing:5px">明けましておめでとうございます！</p>

表示効果は「明けましておめでとうございます！」です。

要約する

HTML/CSS でのスペース処理とページ内のスペースを保持する方法についての記事はこれで終わりです。より関連性の高い HTML/CSS スペース処理コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

<<: アクセス速度を上げるためにウェブサイトを最適化する方法の更新

>>: CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス