Open In App

How to insert spaces/tabs in text using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we are going to learn how can we add spaces/tabs in text using HTML/CSS. As we know HTML doesn’t support more than one space by default, that’s why we need some extra attributes or CSS to get extra space in between our text.

These are the following approaches by using these we can add spaces/tabs in text:

Using the HTML Entities:

  • The   character entity is used to denote a non-breaking space which is a fixed space. This may be perceived as twice the space of a normal space. It is used to create a space in a line that cannot be broken by word wrap.
  • The   character entity is used to denote an ‘en’ space which means half point size of the current font. This may be perceived as twice the space of a normal space.
  • The   character entity is used to denote an ’em’ space which means equal to the point size of the current font. This may be perceived as four times the space of a normal space.

Syntax:

  // Regular space
  // Two spaces gap
  // Four spaces gap

Example: In this example, we are going to see how to use spaces and please don’t forgot to add     &emsp in code where you need space between your 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   regular space.</p>
    <p>This is a   two spaces gap.</p>
    <p>This is a   four spaces gap.</p>
</body>
 
</html>


Output:

char-entities

Using the tab-size property in CSS:

The tab-size CSS property is set the number of spaces each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using <pre> tags). The tab character can be inserted by holding the Alt 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:

tab-length-space

Using Custom CSS:

A new class can be created which gives a certain amount of spacing by using the margin-left property. The amount of space could be given by the number of pixels specified in this property. The display property is also set to ‘inline-block’ so that no line-break is added after the element. This allows the space to sit next to text and other elements.

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:

margin-left-space



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads