Solving the problem of spaces in html

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

Why are the distances between icons and text different in the above three writing methods? Is it related to the inline-block icon and line breaks? If I change 5 lines

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

the above two effects are the same, why?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

nasp has the same effect as the actual space typed, so why use nbsp?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>       联系我们</h2>

Why do 1 space, 1 nbsp and 5 spaces, 1 nbsp have the same effect?

When the browser parses the html document, multiple connected spaces, carriage returns or TAB will be directly parsed into one...

Inline elements (span, b, a, etc.) ) or carriage returns will be parsed as spaces, so the first piece of code is equivalent to:

 联系我们
  联系我们
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

Normally, HTML will trim the spaces in the document. If you enter 10 consecutive spaces in the document, HTML will remove 9 of them. If you use , you can add spaces to the document.

nbsp is the abbreviation of English Non-Breaking SPace, which can be directly translated as "non-breaking space". Use in HTML to represent 1 space character (1 space character in English), and 1 Chinese character occupies 2 English characters, that is, two .

Whitespace characters in the DOM will cause a lot of trouble when processing the node structure.
In Mozilla's software, all whitespace characters in the original file will appear in the DOM (excluding whitespace characters contained in tags). This processing method is necessary. On the one hand, text can be arranged linearly in the editor, and on the other hand, white-space: pre in CSS can also play a role.
This means:
-Some whitespace characters will become a text node by themselves.
-Some whitespace characters will be combined with other text nodes into one text node.

Internet Explorer ignores whitespace text nodes (for example, newlines) generated between nodes, but other browsers do not.

The above is the detailed content of Solving the problem of spaces in html. For more information, please follow other related articles on the PHP Chinese website!