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

Last Updated : 19 Apr, 2025

When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over layout, spacing, and alignment.

1. Using the HTML Entities

HTML entities are special codes used to add different types of spaces in your text. They are helpful when you want to control the spacing between words or characters more precisely.

Non-Breaking Space ( ): A space that's about twice as wide as a normal space and prevents line breaks. It's used to keep words together on the same line.
En Space (&ensp;): A smaller space, about half the width of the current font, used for small gaps between words.
Em Space (&emsp;): A larger space, equal to the width of the current font, used for bigger gaps or simulating tabs.

Syntax

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

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 allows you to set the number of spaces that each tab character will display. This property is particularly useful for formatting preformatted text (using the <pre> tag) or controlling the tab size in code blocks.

Syntax

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

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

We can create a custom class in CSS to control spacing by using the margin-left property, which adds a specific amount of space. Setting display: inline-block ensures that the space stays next to the text or other elements without causing a line break.

Syntax

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