Html adding spaces to text

How to Insert Spaces in HTML

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.

wikiHow marks an article as reader-approved once it receives enough positive feedback. This article received 11 testimonials and 80% of readers who voted found it helpful, earning it our reader-approved status.

This article has been viewed 5,976,390 times.

Adding extra space between words and paragraphs in HTML is very different than in apps like Microsoft Word. But don’t tear out your hair just yet—we’ll show you the easiest ways to control spacing between words and lines of text, as well as how to add extra space to the beginning of each paragraph so they are properly indented on the page. This wikiHow article teaches you different ways you can add spaces to your HTML code.

Adding Extra Spaces Between Words

Open your HTML code in a text editor. You can use any text editor, such as Notepad for Windows, or TextEdit for macOS, to edit your code. If you press the spacebar multiple times to add extra space between words or characters, you won’t see those extra spaces on your webpage—HTML automatically converts multiple spaces into a single space. You can fix this by using non-breaking space characters instead of pressing the spacebar.

For example, let’s say you want three spaces between the words «What will you learn» and «today?» Instead of pressing the spacebar three times, just type     between the two segments. Here’s an example:

 html> head> title>wikiHow: How-to instructions you can trust.title> head> body> p>What will you learn   today?p> body> html> 

Keeping Spaces in Pasted Text

Open your HTML code. Another way to add more spaces to your code is to use the HTML tag. This tag essentially displays the text exactly as you type or paste it, spaces and all. Start by opening your code in a text editor like Notepad for Windows or TextEdit for macOS.

Type tags in the body of your document. Any text you want to keep preformatted with a particular amount of spaces and/or line breaks will go between these tags:

 html> head> title>wikiHow: How-to instructions you can trust.title> head> body> pre> pre> body> html> 

Type or paste text exactly as intended between the «» and »» tags. In this example, we’re creating three spaces between words, as well as a line break. When pre-formatting text, any spaces between words, as well as line breaks you create by pressing «Enter» or «Return,» will be displayed on the webpage. [2] X Research source

 html> head> title>wikiHow: How-to instructions you can trust.title> head> body> pre>What will you learn today?pre> body> html> 

Inserting Empty Lines (Line Breaks)

Open your HTML code in a text editor. Do you want to add extra space between paragraphs or other elements on the page? Pressing Enter or Return a bunch of times in your code won’t do the trick, but adding a line break tag
will! Start by opening the HTML code of the page you want to edit.

 html> head> title>wikiHow: How-to instructions you can trust.title> head> body> pre>What will you learn today?pre> br>br> p>You will learn a lot!p> body> html> 

Indenting Paragraphs

Open an HTML document. Let’s say you want to indent the beginning a paragraph with some space—let’s say 10 pixels. The best way to do this would be to use CSS (Cascading Style Sheets). We’ll cover two ways to do this—one lets you indent each paragraph manually, and another indents all paragraphs at once. Start by opening up your HTML document in a text editor.

Indent a single paragraph. If we want to indent the paragraph in our example, we can do so by adding the text-indent property to its

tag. In this example, we’ll be indenting our paragraph by 10px:

 html> head> title>wikiHow: How-to instructions you can trust.title> head> body> p style="text-indent:10px">Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.p> p> Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.p> body> html> 

• Since we added the text-indent property to just the first paragraph, that is the only paragraph that will be indented. Read on to learn how to indent all paragraphs on the page the same way instead of just one!

Create a style section for your CSS. If we want to indent all paragraphs on our page, we can do so by defining the paragraph style in CSS. The style section goes into the head of your HTML code, or on a separate style sheet. Let’s add ours to the head, which is between the and tags:

 html> head> title>wikiHow: How-to instructions you can trust.title> style> style> head> body> p style="text-indent:10px">Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.p> p>Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.p> body> html> 

Type the indenting code into the style area. So, we want every paragraph to begin with 10px of space, not just one. This means we’ll need to create a style for the paragraph tag (

) that automatically adds 10px of space to the beginning of the first word in each paragraph. We’ll also want to remove the text-indent property from our original example, as it won’t be needed anymore. The property should look like this:

 html> head> title>wikiHow: How-to instructions you can trust.title> style> p  text:indent: 10px; style> head> body> p>Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.p> p>Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.p> body> html> 

• You can adjust the number of spaces by typing a different number after «text-indent:».
• You can use unites other than pixels to define the size of your indent, such as percentage (i.e. «text-indent: 15%;») or measurements (e.g., «text-indent: 3mm;»).

Type

at the beginning of each paragraph. Since we’ve added specific instructions to indent the

tag, every paragraph on the page will be indented 2.5em. This goes for our existing paragraphs, and any new paragraphs we add to the page.

Источник

CSS Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

Line Height

The line-height property is used to specify the space between lines:

Example

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Space – How to Add Spaces in HTML

Quincy Larson

Adding a space to your HTML can be deceptively difficult. And there are at least 5 of ways to go about doing this.

This tutorial will show you several examples. It will also show you how to use fancy versions of space, too.

You can do all this in raw HTML, without the need for CSS. But be advised that CSS is the preferred way to add space to your HTML. And freeCodeCamp has a ton of tutorials on how to accomplish this using the CSS box model.

What is the ASCII character for a space?

The ASCII character code for a space is 20. But this is just the standard way. There are several

There are 5 types of spaces in HTML that you can use. To the naked eye, they look the same but they serve slightly different purposes.

And there is also the Tab Character, which represents pressing the tab key on your keyboard. And the Carriage Return Character, which represents pressing the enter key on your keyboard.

+---------------------+-----------+ | Character | HTML Code | +---------------------+-----------+ | Non-breaking space |   | | En space |   | | Em space |   | | Thin space |   | | Standard space |  | | New Line (Return) | 
 | | Tab Character | 	 | +---------------------+-----------+

How wide is a space character?

There are four common widths for space characters:

1. Standard-width space. This is also called «non-line breaking space» because it will not cause a line break (AKA carriage return).
2. Em space. This is called «Em» because it’s as wide as the letter M is in whichever typeface you’re using. (If you’ve heard the term em-dash, this is a dash as wide as the letter M.)
3. En space. This is called «En» because it’s as wide as the letter n is in your typeface.
4. And finally, there’s «Thin space», which is the thinnest of all spaces.

What is the symbol for space in HTML?

The most commonly-used HTML entity is 

You can try throwing this text to force it to render a space.

For example, let’s say you want to put two spaces after a sentence, but something else in the website rendering engine is automatically removing one of the spaces. You may be able to type  to add two spaces.

Is space a non-ASCII character?

No. Space is an ASCII character. It’s ASCII value is 20, and you can type it like this: 

How do I make white space in HTML?

You may want to use CSS to center your HTML elements instead of hard coding spaces.

But if you just want a quick and dirty way to create whitespace, and push text around, you can use the same space character over and over like this:

[The text you want to add trailing whitespace to]      [the text you want to add trailing whitespace to]

What character looks like a space but isn’t?

There are two characters that look like spaces but aren’t:

1. The New Line character – also known as the «carriage return». The HTML code for newline character is:
2. The Tab Character, which is what you get when you press the tab button in a text field. The HTML code for Tab Character is:

I hope this tutorial has been helpful. Go forth and make space. 🚀

Источник