The difference between 6 types of white spaces in HTML

I believe that many students do not have a deep understanding of the space conformance of html. They thought that there is only one space in html, but after reading it, I realized that There are six types of spaces in html! Without further ado, let’s take a look.

HTML provides 5 types of space entities (space entities), which have different widths. Non-breaking spaces ( ) are the width of regular spaces. Runs on all major browsers. Several other spaces (       ‌‍ ) have different widths in different browsers.

 

It is called non-breaking space, the full name is No-Break Space, it is the most common and the space we use the most, large Most people may have only come into contact with  , which is the space generated by pressing the space key. In HTML, if you use the space bar to generate this space, the spaces will not accumulate (only count as 1). It can only be accumulated using html entity representation. The width occupied by this space is obviously and strongly affected by the font.

       

It is called "half-width space", the full name is En Space, en is the measurement unit of font typography, which is em width half of. By definition, it is equivalent to half the font size (e.g. 8px in a 16px font). Nominally the width of the lowercase letter n. This space inherits the consistent characteristics of the space family: it is transparent. This space has a very stable characteristic, that is, the width it occupies is exactly 1/2 the Chinese width, and it is basically not affected by the font.

 

It is called "full-width space", and its full name is Em Space. Em is the measurement unit of typography, which is equivalent to the currently specified number of points. For example, 1 em in a 16px font is 16px. This space also inherits the consistent characteristics of the space family: it is transparent. This space also has a very stable characteristic, that is, the width it occupies is exactly 1 Chinese width, and it is basically not affected by the font.

                 

It is called narrow space, and its full name is Thin Space. We might as well call it a "skinny space", which means that the space is relatively thin, has a thin body, and occupies a relatively small width. It is one-sixth of an em wide.

‌

It is called Zero Width Non Joiner, the full name is Zero Width Non Joiner, referred to as "ZWNJ", is a non-printing The characters are placed between the two characters of the electronic text, suppressing the ligatures that would otherwise occur, and instead drawing them in the original glyphs of the two characters. The zero-width non-joiner character in Unicode is mapped to "" (zero width non-joiner, U+200C), and the HTML character value quoted is: ‌

‍

It is called Zero Width Joiner, the full name is Zero Width Joiner, referred to as "ZWJ", it is a non-printing character, placed in some languages ​​that require complex typesetting (such as Arabic, Hindi (slang) between the two characters, causing the two characters that would not have been hyphenated to produce a hyphenated effect. The Unicode code point for the zero-width hyphen is U+200D (HTML: ‍ ‍).

In addition, the browser will also parse the following characters as whitespace: space ( ), tab stop ( ), line feed ( ) and carriage return ( ) and (　) and so on.

The above is all the content of this article. I hope it can bring you a new understanding of html spaces.

Related recommendations:

##htmlspace code

htmlMultiple forms of spaces_html/css_WEB-ITnose

HTML implements a fixed floating semi-transparent search box on the mobile side

The above is the detailed content of The difference between 6 types of white spaces in HTML. For more information, please follow other related articles on the PHP Chinese website!