Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to insert Spaces/Tabs in text using HTML and CSS?
To insert spaces/tabs in text using HTML and CSS, can be tricky as HTML generally doesn't recognize multiple spaces or tabs by default. If you add extra spaces in your code, they'll collapse into a single space when displayed in the browser. We will be understanding three different approaches to insert spaces in text.
Syntax
/* Using CSS properties for spacing */
selector {
margin-left: value;
padding-left: value;
text-indent: value;
}
Approaches to Insert Spaces/Tabs in Text
Method 1: Using HTML Entities for Spaces
One of the easiest ways to add a space in HTML is by using HTML entities. HTML entities are special character codes that you can insert directly into your HTML code.
Common HTML Entities for Spaces
| Entity | Description | Width |
|---|---|---|
|
Non-breaking space | Regular space width |
|
En space | Half the width of em |
|
Em space | Width of letter M |
|
Thin space | Very narrow space |
Example
The following example demonstrates different HTML entities for spacing
<!DOCTYPE html>
<html>
<head>
<title>HTML Entities for Spaces</title>
</head>
<body>
<h2>HTML Entities for Spaces</h2>
<p>Regular spacing with non-breaking spaces.</p>
<p>Em spacing with em entities.</p>
<p>En spacing with en entities.</p>
<p>Thin spacing with thin entities.</p>
</body>
</html>
Text with different spacing widths appears: regular 4-space gaps, wide em-space gaps, medium en-space gaps, and narrow thin-space gaps between words.
Method 2: Using CSS Margin or Padding
For larger spacing or "tab-like" gaps, using CSS properties like margin or padding is often more practical. These properties allow you to create space around elements, simulating the effect of a tab.
Example
The following example uses margin-left and padding-left to create tab-like spacing
<!DOCTYPE html>
<html>
<head>
<title>CSS Spacing with Margin and Padding</title>
<style>
.tab-margin {
display: inline-block;
margin-left: 40px;
}
.tab-padding {
display: inline-block;
padding-left: 80px;
}
.text-indent {
text-indent: 50px;
}
</style>
</head>
<body>
<h2>CSS Spacing Methods</h2>
<p>This text has a<span class="tab-margin"></span>40px margin-left gap.</p>
<p>This text has a<span class="tab-padding"></span>80px padding-left gap.</p>
<p class="text-indent">This entire paragraph starts with a 50px text-indent.</p>
</body>
</html>
Three paragraphs appear with different spacing: one with a 40px gap in the middle using margin, one with an 80px gap using padding, and one with the entire first line indented by 50px.
Method 3: Using pre Tag for Preformatted Text
The <pre> tag displays text exactly as it's typed in the HTML, including spaces, tabs, and line breaks. This preserves all whitespace formatting.
Example
The following example demonstrates preformatted text with preserved spacing
<!DOCTYPE html>
<html>
<head>
<title>Preformatted Text Spacing</title>
<style>
pre {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h2>Preformatted Text Examples</h2>
<pre>This sentence has 3 spaces between words.</pre>
<pre>This sentence has 4 spaces between words.</pre>
<pre>This sentence has random spacing between words.</pre>
</body>
</html>
Three preformatted text blocks appear in a monospace font with gray backgrounds, each preserving the exact spacing typed in the HTML code.
Key Points
- HTML Entities: Best for small, consistent spacing within inline text
- CSS Properties: Ideal for larger gaps and precise control over spacing
- Pre Tag: Perfect when you need to preserve exact formatting and whitespace
Conclusion
These three methods provide different solutions for inserting spaces and tabs in HTML text. Choose HTML entities for simple spacing, CSS properties for precise control, and the pre tag when preserving exact formatting is essential.
439 Views
