Open In App

5 Easy Ways to Insert Spaces in HTML

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In HTML, we can add spaces using a special character called the non-breaking space ( ). This ensures the space is visible and doesn't collapse when the page loads. We can use multiple   to create larger spaces. However, it's better to use CSS properties like margin and padding to control spacing between elements. This gives us more control and keeps our code clean.

Ways to Insert Spaces in HTML

Below the five ways to insert spaces in HTML:

1. Using Non-Breaking Space

In HTML,   (non-breaking space) is a special character used to insert spaces that won't collapse, ensuring they are displayed as intended. It is commonly used when extra space is needed between elements.

Syntax

&nbps;
HTML
<html>
<head>
    <title>Non-Breaking Space</title>
</head>
<body>
    <p>
        The element have
        five&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;spaces
    </p>
</body>
</html>

Output

&nbsp-in-html
" " in HTML

2. Using Multiple Non-Breaking Spaces

Using multiple non-breaking spaces (&nbsp;) in HTML allows the insertion of extra spaces between words or elements. Each &nbsp; creates a visible space, and multiple &nbsp; can be used to control the amount of space.

Syntax

&ensp; Or $emsp;
HTML
<html>
<head>
    <title>Non-Breaking Space</title>
</head>
<body>
    <h1>
        Welcome
        to&ensp;GeeksforGeeks
    </h1>
    <p>
        The above text has two space
        between to and GeeksforGeeks
    </p>

    <h3>Hello&emsp;Geeks</h3>
    <p>
        The above text has four space
        between Hello and Geeks
    </p>
</body>
</html>

Output

Or-$emsp;
&emsp Or $emsp; in HTML

3. Using Preformatted Text Tag

The <pre> tag in HTML is used to display preformatted text, where the text is shown exactly as it is written in the HTML code, including spaces and line breaks. This means that multiple spaces, tabs, and line breaks are preserved and displayed as they appear in the HTML file.

Syntax

<pre>Content...</pre>
HTML
<html>
<head>
    <title>Non-Breaking Space</title>
</head>
<body>
    <h1>Welcome to
        GeeksforGeeks
    </h1>
    <pre>
            ** 
        **** 
        ****** 
        ***********     
    </pre>
</body>
</html>

Output

<pre>-tag-in-HTML
tag in HTML

4. Using Break Tag

The <br> tag in HTML is used to create a line break, meaning it moves the content after it to the next line, just like pressing "Enter" on your keyboard. It does not need a closing tag.

Syntax

<br>
HTML
<html>
<head>
    <title>Non-Breaking Space</title>
</head>
<body>
    <h1>
        Welcome to <br>
        GeeksforGeeks
    </h1>
</body>

</html>

Output

Break-tag-in-HTML
Break tag in HTML

5. Using Paragraph Tag

The <p> tag in HTML is used to define a paragraph. It groups content into a block of text, and browsers automatically add some space before and after each paragraph to separate them from other content.

Syntax

<p>Content...</p>
HTML
<html>
<head></head>
<body>
    <p>
        Web Design is a field related to
        designing websites on the Internet.
        Without a good design, a website
        fails to perform well and cannot
        produce a good impact on the user.
        Design is a creative process that
        affects the ranking of the brand.
    </p>
    <p>
        A good website design helps
        to create an engaging online
        presence that captivates the
        audience.
    </p>
</body>
</html>

Output:

ptag

Note => CSS can also be used to insert spaces in HTML. By using properties like margin, padding, and line-height, CSS provides more control over spacing, making the layout cleaner and more flexible compared to relying on HTML tags like &nbsp; or <br>.


Article Tags :

Similar Reads