Whitespace processing in HTML/CSS and how to preserve whitespace in the page

Whitespace rules in HTML In HTML, multiple spaces in the content are generally regarded as one, and consecutive spaces are automatically merged. At the same time, the spaces before and after the content will also be cleared, as follows: <p> fly63 com </p> The display effect is: fly63 com Note: This mechanism of browser processing also applies to tabs (\t) and line breaks (\r and \n) in addition to the normal space key, which can be explicitly indicated by using tags. HTML whitespace preservation At this time, if you want multiple consecutive spaces in HTML to be displayed on the web page, the browser will show the real space indentation and line break effects. We know that there are generally two ways, using tabs, or using to represent spaces. as follows: <pre> fly63 com </pre> or  fly63   com  The spaces in Html are currently: \| \| \| \|

Whitespace rules in HTML

In HTML, multiple spaces in the content are generally regarded as one, and consecutive spaces are automatically merged. At the same time, the spaces before and after the content will also be cleared, as follows:

<p> fly63 com </p>

The display effect is:

fly63 com

Note: This mechanism of browser processing also applies to tabs (\t) and line breaks (\r and \n) in addition to the normal space key, which can be explicitly indicated by using tags.

HTML whitespace preservation

At this time, if you want multiple consecutive spaces in HTML to be displayed on the web page, the browser will show the real space indentation and line break effects. We know that there are generally two ways, using tabs, or using to represent spaces. as follows:

<pre> fly63 com </pre>

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

The spaces in Html are currently: | | | |

		Non-breaking whitespace (1 character width)
&ensp;		Half space (1 character width)
&emsp;		A space (2 characters wide)
		Narrow whitespace (less than 1 character width)

SS space reserved

1. In CSS, when the white-space property value is pre, it is processed in the same way as the tag. The browser will preserve spaces and line breaks in the text, for example:

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

The display effect is: 'fly63 com'

2. When the CSS white-space property is pre-line, it means retaining line breaks. Except that line breaks are output as is, everything else is consistent with the white-space:normal rule.

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

The display effect is:

fly63
com

3. The CSS letter-spacing property is used to set the spacing between characters in the text, for example:

<p style="letter-spacing:5px;">Welcome! </p>

The display effect is: Welcome!

4. The word-spacing property of CSS is used to set the spacing between words in the text, for example:

<p style="word-spacing:5px">Happy new year!</p>

The display effect is: Happy new year!

Summarize

This is the end of this article about space processing in HTML/CSS and how to retain spaces in the page. For more relevant html css space processing content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to optimize a website to increase access speed update

>>: CentOS 7.9 installation and configuration process of zabbix5.0.14