How to Put Spaces Between Lines in HTML – A Practical Guide

Proper spacing between lines of text is essential for improving readability and creating a visually balanced layout on your website. In HTML, line spacing is controlled through CSS rather than HTML tags. This guide will teach you how to add space between lines in HTML using CSS best practices.

Table of Contents

🧐 What Is Line Spacing?

Line spacing refers to the vertical distance between lines of text in a paragraph or block of content. It’s commonly known as leading in typography, and in CSS, it’s handled using the line-height property.

✅ Method 1: Use `line-height` in CSS

The line-height property is the standard way to set spacing between lines of text.

📌 Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Spacing Example</title>
  <style>
    .spaced-text {
      font-size: 16px;
      line-height: 1.8; /* 1.8 times the font size */
    }
  </style>
</head>
<body>

  <p class="spaced-text">
    This is the first line of text.<br>
    This is the second line of text.<br>
    This is the third line of text.
  </p>

</body>
</html>

📐 How It Works:

line-height: 1.8; means the line height is 1.8 times the font size.
You can also use pixel values, like line-height: 28px;.

🧠 Tips for Using `line-height`

Value Type	Example	Use Case
Unitless	`line-height: 1.5;`	Scales naturally with font size
Pixel-based	`line-height: 24px;`	Fixed, exact spacing
Percentage	`line-height: 150%;`	Equivalent to 1.5 in unitless

Unitless values are generally more responsive and recommended for most layouts.

🔧 Method 2: Add Space Between Paragraphs

If you want extra space between separate paragraphs, use the margin-bottom property:

p {
  margin-bottom: 20px;
}

This creates spacing between blocks, not individual lines.

❌ What Not to Use: `<br><br>`

Some beginners add multiple <br> tags to create vertical space:

<p>Line 1<br><br>Line 2</p>

🚫 This is not recommended for layout styling. Use CSS instead—it’s cleaner and more maintainable.

🧾 Conclusion

Adding space between lines in HTML is best handled using CSS with the line-height property. It offers flexibility, responsiveness, and full control over how your text looks. Avoid using extra <br> tags for spacing—stick with semantic HTML and CSS for professional results.

Pro Tip: A line-height between 1.4 and 1.8 is ideal for body text to maintain readability across devices.

🧐 What Is Line Spacing?

✅ Method 1: Use line-height in CSS