How to insert spaces/tabs in text using HTML/CSS? - GeeksforGeeks

30 Jul, 2021
Spacing can be added using HTML and CSS by 3 approaches:
Method 1: Using the special characters designated for different spaces
The &nbsp; character entity 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 &ensp; character entity 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 &emsp; character entity 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: &nbsp;
Two spaces gap: &ensp;
Four spaces gap: &emsp;

Example:
<!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>
In the above code the regular space and two space  and four space gaps code is not visible so here is how it looks
Output:
Method 2: Using the tab-size property to set spacing for tab characters
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: 2;
    }

Example:
<!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:
Method 3: Creating a new class for spacing using 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: 40px;
}

Example:
<!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:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
gurukiranx
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)