HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

How to add Space in Html

In HTML, we can easily add the space in the document using the following different ways:

Using Html
Using Internal CSS

Using Html

If we want to add the space in the document using Html tag to show the space before and after the text then we have to follow the steps which are given below. Using these steps, we can easily add the space:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the space.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the space using Html tags
</Title>
</Head>
<Body> 
This page helps you to understand how to add the space in Html document.
And, this section helps you to understand how to add the space using the Html tags.
</Body>
</Html>

Step 2: Now, place the cursor where we want to add the space. And, then we have to press the spacebar from the keyboard. Basically, web page shows only one space between the two words. It does not matter that how much we have pressed the spacebar.

Step 3: If we want to show more than one space before or after the text on the webpage then we have to give the following tag:

Step 4: If we want to insert/add the longer space then we also use the following tags for showing two or four spaces between the text on the web page:

        This tag is used for displaying two spaces.

        This tag is used for displaying four spaces.

Step 5: We can also add the

 tag, which displays the text on the web page as same as entered in the Html document. 
    
     <pre>   Any text or paragraph </pre>

    
 Step 6: When we have added the space successfully in the document, then we have to save the Html file and run the file. 
    
     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the space using Html tags
</Title>
</Head>
<Body> 
This page helps you to understand   <!-- This tag shows one space between the 'understand' and 'how' words. -->
how to add the   <!-- This tag shows two space between the 'the' and 'space' words. --> space in    <!-- This tag shows four space between the 'in' and 'Html' words. -->
 Html document.
<pre> <!-- This tag shows the same content which is written between the pre tags. -->
And, this   section   helps  you to           understand how to add the space using the        Html tags.</pre>
</Body>
</Html>

    
 The output of above Html code is shown in the following screenshot:
  Using Internal CSS
 If we want to add the space in the document using the Internal Cascading stylesheet to show the space before and after the text, we have to follow the steps which are given below. Using these steps, we can easily add the space.
 Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS for adding the space. 
    
     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the space using the Internal Cascading StyleSheet
</Title>
</Head>
<Body> 
This page helps you to understand how to add the space in Html document.
And, this section helps you to understand how to add the space using the Internal Cascading Stylesheet.
</Body>
</Html>

    
 Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the

Step 3: Now, we have to type the paragraph tag and the class tab1 in the

tag

of the Html. And, at last, we have to save the Html file and then run the file.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add the space using the Internal Cascading StyleSheet
</Title>
<style>
p
{
text-indent:5em;
}
.tab1 { 
            tab-size: 2; 
        } 
</style>
</Head>
<Body> 
<p>This page helps you to understand how to add the space in Html document.
<pre class="tab1">
And, this section helps you to understand how to   	  add the  <br>space using the Internal Cascading Stylesheet.</pre> </p>
</Body>
</Html>

Test it Now

The output of the above Html code is shown in the following screenshot: