Home 〉 HTML Tutorials 〉 HTML Space: Add & Control Space in HTML using Tags & CSS - Complete Guide
HTML Space: Add & Control Space in HTML using Tags & CSS - Complete Guide !
HTML Space: Add & Control Space in HTML using Tags & CSS - Complete Guide !
Do you want to learn how to add space between elements in HTML?
This blog post explained different techniques like non-breaking spaces (' '), the '<pre>' tag, and CSS spacing with 'margin', 'padding', and 'white-space'. We also covered styling techniques and HTML elements that help manage layout and spacing. Examples and explanations made everything easier to understand. The complete blog post on HTML space is as follows.
Introduction
In web development, spacing plays a crucial role in making content readable and visually appealing. HTML offers different ways to add space between text, elements, and components. This guide covers HTML space tags, non-breaking spaces, and CSS spacing properties like margin and padding, with clear examples and tips for SEO.
Different Ways to Add Space in HTML
HTML doesn't have a direct “space” tag, but it offers several methods to manage spacing:
| Element | Description | Type |
|---|---|---|
| '<br>' | Line break | Empty |
| '<p>' | Paragraph with automatic margin | Block |
| '<div>' | General block container, customizable | Block |
| '<span>' | Inline container for text | Inline |
1. ' ' - Non-Breaking Space
Syntax: ' '
- Description: Adds a space that the browser won't break onto a new line.
- Inline Element?
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<p>This is a sentence.</p>
</body>
</html>
output 📌
This is a sentence.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This adds multiple fixed spaces between the words. Each ' ' creates one non-breaking space.
2. '<pre>' - Preformatted Text
Syntax: '<pre> ... </pre>'
- Description: Retains all spaces, tabs, and line breaks within the tag.
- Block Element
Example:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<pre style="font-size:14px; background-color:#f9f9f9; padding:10px;">
This text has spacing exactly as typed.
</pre> </body>
</html>
output 📌
This text has spacing exactly as typed.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The '<pre>' tag is great for displaying code or structured text.
3. CSS 'margin' and 'padding'
➤ 'margin'
Creates space 'outside' the element.
Example:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<div style="margin: 20px; background-color: #e9ecef; padding:10px;">Box with margin</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Adds 20px space around the box.
➤ 'padding'
Creates space 'inside' the element.
Example:
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<div style="padding: 20px; background-color: #dee2e6;">Box with padding</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Adds 20px space inside the box before content starts.
4. CSS 'white-space' Property
Values: 'normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'
Example:
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<p style="white-space: pre-wrap;">Line 1
Line 2 with multiple spaces.</p>
</body>
</html>
output 📌
Line 1 Line 2 with multiple spaces.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Preserves spaces and wraps the content normally.
Related HTML Elements for Space
| Element | Description | Type |
|---|---|---|
| '<br>' | Line break | Empty |
| '<p>' | Paragraph with automatic margin | Block |
| '<div>' | General block container, customizable | Block |
| '<span>' | Inline container for text | Inline |
Best Inline CSS Styling for Spacing
Use these CSS properties:
- 'margin'
- 'padding'
- 'text-align'
- 'background-color'
- 'border'
- 'border-radius'
- 'width', 'height'
- 'color', 'font-size'
Example:
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<div style="margin:20px; padding:15px; background-color:#f1f1f1; border:1px solid #ccc; border-radius:5px;">
Example box with spacing
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Conclusion
HTML doesn't have a dedicated "space" tag, but using ' ', '<pre>', and CSS properties like 'margin', 'padding', and 'white-space', you can control spacing precisely. These techniques enhance readability, accessibility, and layout structure on your web pages.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- HTML ' ' - Non-Breaking Space in HTML with Examples and Usage
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
- HTML Text Formatting Tags Explained with Examples - Complete Guide
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- HTML '<br>' Tag - Line Break Tag with Syntax, and Examples
- CSS Margin Explained with Examples - Master Spacing in Web Design
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
Frequently Asked Questions (FAQs)
How to add multiple spaces in HTML?
Use multiple ' ' like ' ' for three spaces.
Can I use CSS for spacing instead of ' '?
Yes, CSS 'margin' and 'padding' are preferred for layout and design.
What is the difference between margin and padding?
Margin is outside the element; padding is inside around content.
Does HTML ignore regular spaces?
Yes, HTML collapses multiple spaces into one. Use ' ' or CSS to preserve space.
Is '<pre>' tag good for adding space?
Yes, it preserves all whitespace and is useful for code or formatted text.