HTML nbsp

Last Updated : 30 May, 2024

HTML nbsp is an HTML entity for non-breaking space. It prevents two words from being rendered at different lines. This entity is particularly useful for maintaining spacing in cases where normal spaces might collapse.

Syntax:

&nbsp;

Below are the two main important reasons to use HTML nbsp:

Table of Content

Prevent Line Break
The nbsp for Extra Space

Prevent Line Break

To prevent line breaks, the   entity is used. It is often used to prevent line breaks between two words or elements. When you use   between any words or any elements, it makes sure that the browser renders the words or elements together on the same line.

Example: In this example, demonstrates the use of   entity to prevent line breaks between "cannot" and "produce". The styled divs illustrate the impact of spacing without and with &nbsp.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                initial-scale=1.0">
    <title>html nbsp</title>

    <style>
        div {
            font-size: 20px;
            font-weight: 700;
            color: green;
            margin-bottom: 50px;
        }

        p {
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div>
        Web Design is a field related to designing
        websites on the Internet. Without a good
        design, a website fails to perform well and
        cannotproduce a good impact on the user.
    </div>
    <p>
          The above text used HTML NBSP between 
          cannot and produce
      </p>
    <div>
        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.
    </div>
</body>

</html>

Output:

The &nbsp for Extra Space

Spaces with   or non-breaking space are essential for maintaining fixed spacing in HTML, preventing words or elements from breaking across lines. They ensure consistent layout and readability, particularly useful for preserving formatting in contexts where normal spaces collapse.

Example: The example below shows how to give extra spaces using nbps.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>html nbsp</title>
    <style>
        div {
            font-size: 20px;
            font-weight: 700;
            color: green;
            margin-bottom: 50px;
        }

        p {
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div>
        Web Design is a field
        related&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to
        designing websites on the Internet.
    </div>
    <p>
        The above text used HTML NBSP
        between cannot and produce
    </p>
    <div>
        Web Design is a field related
        to designing websites on
        the Internet.
    </div>
</body>

</html>

Output:

HTML Symbols

shivanigupta18rk

Improve

Article Tags :

HTML
HTML5

HTML nbsp

Syntax:

Prevent Line Break

The &nbsp for Extra Space

Similar Reads

Thank You!

What kind of Experience do you want to share?