How to set spaces in HTML paragraph elements? Summary of HTML space settings-HTML Tutorial-php.cn

How to set spaces in HTML paragraph elements? Summary of HTML space settings

寻∝梦

Release： 2018-09-10 13:40:48

Original

18345 people have browsed it

You want to leave some spaces in the paragraph elements of HTML summary, but it will definitely not work if you type the space symbol directly, because the browser will only display one space, no matter how many spaces you click, it will be the same, but today's space symbol It may be able to help you with this. Finally, there is the ranking of the three space characters. Let’s take a look at this article together

First of all, let’s take a look at how to set spaces in the HTML paragraph element:

Everyone knows that in an HTML paragraph , if you want to add more distance between sentences, just click a space. However, in most mainstream browsers, all the many spaces will only display a small space, so when writing code, the space symbol will be displayed. It is specially used. Although there are relatively few space symbols used now, in terms of detail processing, it is most convenient to use this space symbol when you want to leave some spaces.

Now let’s take a look at the setting of the space character in a paragraph element:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p>这里是PHP中文网；                                       这里是PHP中文网；这里是PHP中文网；
      这里是PHP中文网；这里是PHP中文网；这里是PHP中文网；这里是PHP中文网；这里是PHP中文网
；这里是PHP中文网；</p>
</body>
</html>

Copy after login

The above code leaves a large empty line after the first sentence. We want to Which one has a greater distance between this and the space character I used later?

Let’s take a look at the rendering displayed in the browser:

How to set spaces in HTML paragraph elements? Summary of HTML space settings

We can clearly see that the first one uses so many spaces The stacked space will only display a small space in the browser. The effect of displaying the space character after it is much better than typing the space by yourself. The space will be much larger immediately.

Of course, we usually don’t want to empty a large space. Even if we want to empty a large space, we will not use the space character. Today we are talking about the use of the space character . Not to mention other things, this space character is quite easy to use for some lazy people. (If you want to see more, go to the PHP Chinese website HTML Development Manual column to learn)

Let’s take a look now and there are two more space characters that are the same as . We Let’s take a look:

: “en space” is named according to the measurement unit of typography, and the width is the width of two ordinary spaces

: “em space "About the width of four ordinary spaces

are all space symbols that do not affect line breaks. They are slightly less used than because they sometimes have larger empty spaces.

Let’s take a closer look at the differences between them:

<body>
<p>这里是PHP中文网；&ensp;&ensp;&ensp;这里是PHP中文网；这里是PHP中文网；   这里是PHP中文网；这里是PHP中
文网；&emsp;&emsp;&emsp;这里是PHP中文网；这里是PHP中文网；这里是PHP中文网；这里是PHP中文网；</p>
</body>

Copy after login

Added three space symbols inside, let’s take a look at the effect:

How to set spaces in HTML paragraph elements? Summary of HTML space settings

Three types of space tags, let’s rank them by looking at the display picture above. Of course, there are many people on the Internet who rank this, but we say our own to make ourselves more Just know it clearly.

Now let’s take a look at the ranking according to the picture above:

The first place, the largest one is of course , it is also obvious that, They are all three space characters, which is the largest.

The second place, that is, the second largest empty one is , this is the second largest empty one, nearly twice as big as the last one.

The last one is of course the space character we are talking about in this chapter. Although the empty space is small, it is still very practical in some places.

Okay, that’s it for today’s article about spaces . If you want to learn more, come to the PHP Chinese websitehtmlReference Manual column to learn. If you have any questions, you can ask below.

【Editor’s Recommendation】

Can the padding attribute in css have a negative value? Detailed explanation of padding attribute in css

#What are the css pseudo-elements? Detailed introduction to css pseudo-elements (with examples included)

The above is the detailed content of How to set spaces in HTML paragraph elements? Summary of HTML space settings. For more information, please follow other related articles on the PHP Chinese website!