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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec 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 0c6dc11e160d3b678d68754cc175188a 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 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 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 "0c6dc11e160d3b678d68754cc175188a" instead of "3368ffdc052dbb5ac1b39cab5e453857Tutorial5db79b134e9f6b82c0b36e0489ee08ed" do not write "Spaces3499910bf9dac5ae3c52d5ede7383485 Tutorial 5db79b134e9f6b82c0b36e0489ee08ed".

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!