Download ArticleDownload Article

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 How.com.vn article teaches you different ways you can add spaces to your HTML code.

Method 1
Method 1 of 4:

Adding Extra Spaces Between Words

Download Article
  1. How.com.vn English: Step 1 Open your HTML...
    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.
  2. How.com.vn English: Step 2 Type   where you want to insert an extra space.
    Add one non-breaking space character for every space you want to add. Unlike pressing the spacebar multiple times in your HTML code, typing   more than once creates as many spaces as there are instances of  .[1]
    • 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:
      <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title></head><body><p>What will you learn&amp;nbsp;&amp;nbsp;&amp;nbsp;today?</p></body></html>
    • Basically, &nbsp; just translates to "one space" in HTML.
    Advertisement
  3. How.com.vn English: Step 3 Use other spacing characters as shortcuts.
    If you want to insert two spaces, four spaces, or indent the beginning of a line, you don't have to type &nbsp; multiple times:
    • Two spaces: Type &ensp;
    • Four spaces: Type &emsp;
  4. Advertisement
Method 2
Method 2 of 4:

Keeping Spaces in Pasted Text

Download Article
  1. How.com.vn English: Step 1 Open your HTML code.
    Another way to add more spaces to your code is to use the HTML <pre> 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.
  2. How.com.vn English: Step 2 Type <pre> </pre> 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:
    <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title></head><body><pre>  </pre></body></html>
  3. How.com.vn English: Step 3 Type or paste text exactly as intended between the "<pre>" and ''
    <pre>'' 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]
    <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title></head><body><pre>What   will   you   learn   today?</pre></body></html>
  4. Advertisement
Method 3
Method 3 of 4:

Inserting Empty Lines (Line Breaks)

Download Article
  1. How.com.vn English: Step 1 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 <br> will! Start by opening the HTML code of the page you want to edit.
  2. How.com.vn English: Step 2 Type <br> on each line you want to make blank.
    For example, if you want to insert just one extra blank horizontal line between two paragraphs, you'd just type one <br> once. But if you wanted to add three line breaks, you could type it three times: <br><br><br>.
    • In this example, we're adding two lines of extra space between our sentences:
      <!DOCTYPE html><html><head><title>How.com.vn: 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>
  3. Advertisement
Method 4
Method 4 of 4:

Indenting Paragraphs

Download Article
  1. How.com.vn English: Step 1 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.
  2. How.com.vn English: Step 2 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 <p> tag. In this example, we'll be indenting our paragraph by 10px:
    <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title></head><body><p style="text-indent:10px">Welcome to How.com.vn, the most trusted how-to site on the internet. How.com.vn is where trusted research and expert knowledge come together.</p><p> Since 2005, How.com.vn 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!
  3. How.com.vn English: Step 3 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 <head> and </head> tags:
    <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title><style></style></head><body><p style="text-indent:10px">Welcome to How.com.vn, the most trusted how-to site on the internet. How.com.vn is where trusted research and expert knowledge come together.</p><p>Since 2005, How.com.vn 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>
  4. How.com.vn English: Step 4 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 (<p>) 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:
    <!DOCTYPE html><html><head><title>How.com.vn: How-to instructions you can trust.</title><style>p { text:indent: 10px;</style></head><body><p>Welcome to How.com.vn, the most trusted how-to site on the internet. How.com.vn is where trusted research and expert knowledge come together.</p><p>Since 2005, How.com.vn 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;").
  5. How.com.vn English: Step 5 Type <p> at the beginning of each paragraph.
    Since we've added specific instructions to indent the <p> 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.
    • Advertisement

    Community Q&A

    Search
    Add New Question
    • Question
      If I define lines of text as individual paragraphs, I get a blank space between lines. How do I get rid of that space?
      How.com.vn English: Community Answer
      Community Answer
      Use a line break instead of the paragraph break.
    • Question
      Can I specify more than one CSS class for any HTML element?
      How.com.vn English: Community Answer
      Community Answer
      Yes, it's very simple too. Inside the class attribute, add all the classes you want the element to have, separated by a space. For example, if you had a tag needing the classes "blueFont" and "underline," the class attribute would be:class="blueFont underline"
    • Question
      How do I space HTML code vertically?
      How.com.vn English: Community Answer
      Community Answer
      The most basic is to simply style it with margin and/or padding. Alternatively, read into absolutely positioning an element, then you can specify exactly where on the page you want in, pixel for pixel.
    See more answers
    Ask a Question
    200 characters left
    Include your email address to get a message when this question is answered.
    Submit
        Advertisement

        Video

        Tips

        • If your spaces turn into strange symbols on the web browser, it's most likely caused by extra data stored in the word processing format not intended for online display. Avoid this by using a plaintext editor like Notepad or TextEdit.
        • CSS is a much more powerful and predictable way to lay out your page, including the spacing of your text.
        Submit a Tip
        All tip submissions are carefully reviewed before being published
        Thanks for submitting a tip for review!
        Advertisement

        Expert Interview

        Thanks for reading our article! If you’d like to learn more about dealing with html, check out our in-depth interview with Jessica Andzouana.

        About This Article

        How.com.vn English: Jessica Andzouana
        Written by:
        Software Engineer
        This article was written by Jessica Andzouana and by How.com.vn staff writer, Nicole Levine, MFA. Jessica Andzouana is a Software Engineer based in the San Francisco Bay Area. With over five years of professional experience in front-end development, digital art, and design, she is passionate about emerging technologies such as blockchain and AI. Her background as both a programmer and artist, paired with a highly design-conscious mindset, provides her a fresh perspective and unique skill set to produce creative solutions in her field. She works at Alcacruz as a Software Engineer, and received a dual BS/BA degree from Santa Clara in Computer Science and Studio Art. This article has been viewed 6,099,832 times.
        How helpful is this?
        Co-authors: 54
        Updated: March 20, 2024
        Views: 6,099,832
        Categories: HTML
        Article SummaryX

        1. Type "&nbsp" to add a single space.
        2. Type "&ensp" to add 2 spaces.
        3. Type "&emsp" to add 4 spaces.
        4. Use the non-breaking space (nbsp) 4 times to insert a tab.
        5. Use "br" to add a line break.

        Did this summary help you?

        Thanks to all authors for creating a page that has been read 6,099,832 times.

        Reader Success Stories

        • How.com.vn English: Anonymous

          Anonymous

          Sep 11, 2018

          "I was looking to add space before and after text in a button. this article made my life easy, because &emsp; is..." more
          Rated this article:
        Share your story

        Is this article up to date?

        ⚠️ Disclaimer:

        Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
        Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

        Notices:
        • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
        • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
        • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
        • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

        Advertisement