How to Insert Spaces/Tabs in Text using HTML and CSS

Last Updated : 02 Jan, 2025

HTML doesn’t support more than one space by default, so we need extra attributes or CSS to add extra space between text elements. We will learn how to add spaces and tabs in text using HTML and CSS. This article will explore various approaches to achieve this, enhancing the readability and presentation of your web content.

Approaches to Adding Spaces and Tabs in Text

1. Using the HTML Entities

HTML entities can be used to insert non-breaking spaces, en spaces, and em spaces in text. These entities help in adding precise spacing within the text.

Non-Breaking Space ( ): Denotes a fixed space that is perceived as twice the space of a normal space. It prevents line breaks at its location.
En Space (&ensp;): Represents a space equal to half the point size of the current font.
Em Space (&emsp;): Represents a space equal to the point size of the current font, perceived as four times the space of a normal space.

Syntax

&nbsp;    <!-- Regular space -->
&ensp;    <!-- Two spaces gap -->
&emsp;    <!-- Four spaces gap -->

Example: In this example, we are going to see how to use spaces and please don’t forgot to add  , &ensp;, and &emsp in code where you need to add space between the text.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to insert spaces/tabs in text using HTML/CSS?
    </title>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>How to insert spaces/tabs in text using HTML/CSS?</b>

    <p>This is a &nbsp; regular space.</p>
    <p>This is a &ensp; two spaces gap.</p>
    <p>This is a &emsp; four spaces gap.</p>
</body>

</html>

Output:

2. Using tab-size Property in CSS

The tab-size property in CSS is used to set the number of spaces each tab character will display. This method works with pre-formatted text (using <pre> tags). The tab character can be inserted by holding the Alt key and pressing 0 and 9 together.

Syntax

.tab {
        tab-size: value; /* for e.g: value = 2*/
    }

Example: In this example, we are going to implement the above-explained method.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to insert spaces/tabs in text using HTML/CSS?
    </title>
    <style>
        .tab1 {
            tab-size: 2;
        }

        .tab2 {
            tab-size: 4;
        }

        .tab4 {
            tab-size: 8;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>How to insert spaces/tabs in text using HTML/CSS?</b>

    <pre class="tab1">This is a    tab    with 2 spaces.</pre>
    <pre class="tab2">This is a    tab    with 4 spaces.</pre>
    <pre class="tab4">This is a    tab    with 8 spaces.</pre>
</body>

</html>

Output:

3. Using Custom CSS

A new class can be created to provide a specific amount of spacing using the margin-left property. The amount of space can be controlled by the number of pixels specified. The display property is set to inline-block to ensure the space sits next to text and other elements without line breaks.

Syntax

.tab {
    display: inline-block;
    margin-left: value;  /* for e.g: value = 40px*/
}

Example: In this example, we are going to implement the above-explained method.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to insert spaces/tabs in text using HTML/CSS?
    </title>
    <style>
        .tab {
            display: inline-block;
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>How to insert spaces/tabs in text using HTML/CSS?</b>

    <p>This is a<span class="tab"></span>tab space in the document.</p>
</body>

</html>

Output:

Adding spaces and tabs in text using HTML and CSS enhances the readability and presentation of your web content. By using HTML entities, the tab-size property, or custom CSS, you can effectively control the spacing in your text.

How To Place Text on Image using HTML and CSS?

GeeksforGeeks

Improve

Article Tags :

How to Insert Spaces/Tabs in Text using HTML and CSS

Approaches to Adding Spaces and Tabs in Text

1. Using the HTML Entities

Syntax

2. Using tab-size Property in CSS

Syntax

3. Using Custom CSS

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?