Space in HTML

Last Updated : 15 Jul, 2024

In HTML, space management is very important for layout and readability. The " " tag creates a line break in text, which brings content to start on a new line. This makes it easy when you want to structure text into separate lines, similar to hitting "Enter" on your keyboard.

On the other hand, " " (non-breaking space) inserts a space that prevents browsers from bringing multiple consecutive spaces into one. It's useful for situations where you need to maintain specific spacing between words or elements without them wrapping to a new line.

Below are the approaches to add space in HTML:

Table of Content

Using Tag
Using Margin and Padding
Adding Whitespace
Using Entity

Using Tag

One of the easiest ways to add space in HTML is by using the tag, which stands for "line break." Simply insert this tag where you want to create a new line or add vertical space between elements.

Example: This demonstrates the use of the tag to create a line break within a paragraph, separating text into two distinct lines.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using br tag</title>
</head>

<body>
    <p>This is the first line.<br>This is the second line.</p>
</body>

</html>

Output:

Screenshot-2024-06-07-173159 — using br tag

Using Margin and Padding

HTML also allows you to adjust spacing around elements using CSS (Cascading Style Sheets). Margin and padding are two CSS properties commonly used for spacing:

Margin: Adds space outside the border of an element.
Padding: Adds space inside the border of an element.

Example: This demonstrates a box with a black border, 20px margin, and 10px padding, containing the text "Content with margin and padding".

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Box with Margin and Padding</title>
</head>

<body>

    <div style="margin: 20px; padding: 10px;
            border: 1px solid black;">Content with
             margin and padding</div>

</body>

</html>

Output:

Adding Whitespace

HTML collapses consecutive whitespace characters (such as spaces, tabs, and line breaks) into a single space when rendered in the browser. However, you can preserve whitespace using the <pre> tag or the CSS white-space property.

Example: This example shows the adding of White space.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>using Whitespace</title>
</head>

<body>
    <style>
        .preformatted {
            white-space: pre;
        }
    </style>

    <pre>This   text    will    preserve     whitespace.</pre>

</body>

</html>

Output:

Screenshot-2024-06-07-173718 — adding whitespace

Using &nbsp Entity

This entity represents a non-breaking space in HTML. It creates space without allowing the browser to break the line. You can use it to add horizontal space between words or elements.

Example: This demonstrates the use of the non-breaking space entity (` `) to maintain fixed spaces in the sentence "This is spaced out."

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using nbsp entity</title>
</head>

<body>
    <p>This&nbsp;is&nbsp;spaced&nbsp;out.</p>
</body>

</html>

Output:

Screenshot-2024-06-07-174012 — Using nbsp

What is HTML?

shambhavim1gnc

Improve

Article Tags :

Space in HTML

Using <br> Tag

Using Margin and Padding

Adding Whitespace

Using &nbsp Entity

Similar Reads

Space in HTML

Using <br> Tag

Using Margin and Padding

Adding Whitespace

Using &nbsp Entity

Similar Reads

Thank You!

What kind of Experience do you want to share?