Detailed introduction on how to insert spaces in HTML

Normally, we use the space bar to type multiple spaces. When writing code, spaces typed through the space bar, Tab key and Enter key will be automatically ignored by HTML (Hypertext Markup Language). HTML treats such keys as whitespace characters and displays them as a single whitespace interval. Although CSS provides various styles of spacing and indentation, there are also tools in HTML that allow you to define spacing yourself.

Method 1. Insert a single space and tab character

1. Insert a non-breaking space. Generally speaking, HTML will only display a blank space between words no matter how many times you press the space bar. When you need to insert multiple spaces, please enter the   or   code. They are called "space placeholders". If you enter a few, they will display a few spaces on the page.

The reason why it is called non-breaking spaces is because it does not produce newlines. If you abuse this spacing, the browser may not be able to insert line breaks in a neat and readable way.

2. Insert spaces of different widths. There are various character entities that allow browsers to display spaces. Different browsers may display this a little differently, but unlike  , they do not affect line breaks:

  — "enspace" is named after the typographic unit of measurement, width. It is the width of two ordinary spaces

  — "em space" is about the width of four ordinary spaces

3. Use non-breaking spaces to simulate tab characters. One way to generate a paragraph is to insert a few spaces before the first line:    . This method only works with HTML and is not recommended if you are using CSS (other methods will be covered in other steps).

If the content of the paragraph is rich text, please use the "pre" tag.

4. Use CSS to generate paragraphs. The inner margin or outer margin of CSS indicates the specific display format to the browser, so the display effect is more consistent. Even if you don't know CSS very well and don't have an instruction sheet handy, it can be easily added. Here are the specific instructions on how to move the entire paragraph to the right:

In the

section of the HTML document, insert the following command:

<style>p.indent{ padding-left: 1.8em }</style>

"p.indent" definition Create a paragraph (labeled p) called "indent" (you can name it arbitrarily). The remaining commands add padding space to the left of the paragraph.

Return the body of the HTML document. Whenever you want to add a paragraph, insert the following in the tag:

<p class="indent"></p> 。

To adjust the amount of indentation, just change the number "1.8" in the CSS command. The following "em" should be retained, it is the unit representing width.

Method 2. Format long paragraphs

1. Use pre-formatted text. The "pre" element can define pre-formatted text, which will preserve spaces or newlines in the text. Therefore, spaces or enter keys entered in the

tag will be displayed as spaces or line feeds. You can use it to display code samples, poetry, or other text content that requires spaces and line breaks.

One of the drawbacks of preformatted text is its width. It cannot adjust the page width to adapt to the user's window size like ordinary hypertext markup languages.

2. Create a newline character. The
tag is placed at the end of the current line of text and inserts a simple line break. You can enter multiple "br" tags to create multiple blank lines. This is a good way for novice HTML students to write code, but when you learn CSS, you will find that this kind of mandatory HTML style code is not recommended. ,

3. Use the "p" tag to define the paragraph. The p element automatically creates some white space before and after it, so the

tag after the text can end the paragraph. Most browsers separate paragraphs with a blank line, but this does not guarantee precise formatting.

Tips

If you see some extra symbols "floating" on the code when you finally review the text and code, you need to check carefully to see if there are Incomplete code, such as writing "
" instead of "

CSS (Cascading Style Sheets) can provide pixel-level precise control over the layout of element positions in web pages (including spacing in text), allowing for better and more precise editing of web page objects and model styles.

Do not enter spaces after the start tag or before the end tag. For example, when typing "Spaces Tutorial" do not write "Spaces Tutorial ".

The non-spacing character ( ) is an example of a character entity. You cannot type such web characters from the keyboard, but you can use the corresponding code to insert the characters.

Warning

Hypertext Markup Language (HTML) does not display the Tab ( ) line break character normally as you think. Standard hypertext web pages do not have newline breaks, so the "tab" character has no real meaning.

It is best to write HTML language in a code editor or a plain text file, not using the "Word" word processing program. When writing code in text editing software, spaces may turn into strange symbols in web pages, causing display errors. This is usually because the Word program appends additional data to the text content, and this information is not recognized by the web browser, causing display errors.

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