How to insert spaces in HTML

In front-end development, sometimes you need to add spaces to the page, so how to add them? This article will introduce you to the method of inserting spaces in HTML pages. I hope it will be helpful to you. [Related video tutorial recommendation: HTML tutorial]

1. Type the space

in the html page, we can Insert spaces by typing the "space" key.

Example: Type one space in p.p1 and type 5 spaces in p.p2. Note: At this time, type "space" in half-width state

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

Effect picture:

It can be seen that no matter we type 1 space in HTML Or 5 spaces, or multiple other spaces, the web browser will automatically collapse these spaces into just one space.

So how do we display multiple typed spaces? You can type the "space" key in the full-width state, for example:

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

Effect picture:

Note: full-width spaces will be interpreted as Chinese characters, and whitespace It is displayed in the form of Chinese characters and is displayed in real numbers (as many as there are are displayed).

Or use the

 tag to solve this problem (type "space" in half-width state), for example: </p><pre class="brush:html;toolbar:false"><p class="p1">
    <pre class="brush:php;toolbar:false">测试文字| php中文网！

测试文字|     php中文网！

Rendering:

##2. Use the space character of html

We can use the character entities that represent spaces in html to insert spaces in the html page. Let’s take a look at the character entities that represent spaces in html:

Character: a continuous blank space. The width of this space is affected by the font.

 Characters: Type half a "space" key (half the width of a Chinese character) in full-width mode.

 Characters: Type the "space" key in full-width mode (width of 1 Chinese character).

Let’s take a look at the effect:

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

Rendering:

## Description: The   and   characters The occupied width is basically not affected by the font and is quite robust.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to insert spaces in HTML. For more information, please follow other related articles on the PHP Chinese website!