How to tab space instead of multiple non-breaking spaces (nbsp)?
Last Updated :
24 Jun, 2024
Tab space instead of multiple non-breaking spaces refers to using the tab key for indentation or spacing within text, rather than inserting multiple non-breaking space entities (nbsp) to achieve the same visual effect, which can be cumbersome and less efficient.
We can use the <pre> tag or CSS properties like inline-block, padding, and margin to display text with consistent spacing instead of relying on multiple non-breaking spaces (nbsp) for indentation.
Adding tab space using a pre-tag
The <pre> tag, HTML preserves whitespace, including tabs. This tag is ideal for displaying code or text where spacing is critical, as it maintains the original formatting without collapsing multiple spaces into one.
Syntax:
<pre> Contents... </pre>
Example: The example below shows the <pre> tag preserves the original formatting, spaces, and tabs of the enclosed text, commonly used for displaying code snippets with their indentation and whitespace intact.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Using the pre Tag
</title>
</head>
<body>
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<pre>
This is some text with multiple spaces and tabs.
Tabs are preserved, as well as the spaces.
</pre>
</center>
</body>
</html>
Output:
Output
Adding tab space using inline-block
By setting the display property to inline-block for elements, they align horizontally while allowing for padding and margin adjustments. This method is useful for creating tab-like spacing between elements within a container.
Syntax:
display: inline-block;
Example: In the example, CSS is used for tab spacing with a .tab class defined as display: inline-block and margin-left: 20px to create consistent spacing between text elements, resembling tabs for enhanced readability.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using CSS for Tab Spacing</title>
<style>
.tab {
display: inline-block;
margin-left: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="color: green;">
Adding tab space using inline-block
</h2>
<p>
This is some
<span class="tab"></span>
text with
<span class="tab"></span>
multiple
<span class="tab"></span>
spaces and
<span class="tab"></span>
tabs. Tabs are preserved,
<span class="tab"></span>
as well as the
<span class="tab"></span>
spaces.
</p>
</center>
</body>
</html>
Output:
Output
Adding tab space using padding property
By using padding property we can give any amount of spaces in any direction of an element (i.e, top, right, bottom, left) from the border of the element. Here we only deal with the spaces so we need only two padding property i.e, padding-left and padding-right.
Syntax:
padding-left : value;
or
padding-right : value;
Example: In this example, jQuery modifies the paragraph’s left padding upon button click, dynamically changing its appearance within the red-colored div.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
}
P {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").css("padding-left", "30px");
});
});
</script>
</head>
<body>
<div id="demo">
<p> Block 1 </p>
<button>Submit</button>
</div>
</body>
</html>
Output :
Using Padding
Adding tab space Using margin property
Using margin property we can give any amount of spaces in any direction of an element (i.e, top, right, bottom, left) from the border of the element. Here we only deal with the spaces so we need only two margin property i.e, margin-left and margin-right.
Syntax:
margin-left : value;
or
margin-right : value;
Example: In this example, jQuery shifts a green paragraph 60 pixels to the right within a div on button click, using CSS for initial styling and jQuery for dynamic adjustment.
html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
}
P {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").css("margin-left", "60px");
});
});
</script>
</head>
<body>
<div>
<p id="demo"> Block 1 </p>
<button>Submit</button>
</div>
</body>
</html>
Output:
using margin
Similar Reads
How to Add a Non-breaking Space using   in HTML?
In HTML, the non-breaking space character, represented by , is used to control the spacing and formatting of text content. Unlike regular spaces, which browsers typically collapse into a single space, ensures that multiple spaces are preserved. This feature is essential for main
2 min read
How to replace multiple spaces with single space in JavaScript ?
Here are the various methods to replace multiple spaces with a single space in JavaScript. 1. Using replace() Method with Regular Expression (Most Common)The replace() method combined with a regular expression is the most efficient way to replace multiple spaces with a single space. [GFGTABS] JavaSc
2 min read
What is the entity name used for non-breaking space in HTML ?
The character entity is used to denote a non-breaking space which is a fixed space. This may be perceived as twice the space of a normal space. It is used to create a space in a line that cannot be broken by word wrap. If we want to use Two spaces gap, we have to use   and to use
1 min read
How to Insert Page Breaks in Microsoft Word?
Working in MS Word is easy as there are lots of tools and features available. MS-Word is a Word Processing application developed by Microsoft corporations Ltd. In this, a user can make documents and projects with ease. Inserting Page Breaks: When a user is working in MS Word and gets to the end of t
4 min read
How to Insert Spaces/Tabs in Text using HTML and CSS?
When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
4 min read
How to insert a line break in a String PL/SQL
In PL/SQL, inserting line breaks into VARCHAR or NVARCHAR strings can be a good way to enhance the readability and presentation of our data. Whether we are formatting output for display or preparing text for storage, knowing how to insert line breaks is a helpful skill. Here, we will explore techniq
5 min read
How to insert a line break in PHP string ?
In this article, we will discuss how to insert a line break in a PHP string. We will get it by using the nl2br() function. This function is used to give a new line break wherever '\n' is placed. Syntax: nl2br("string \n");where the string is the input string. Example 1: PHP Program to insert a line
2 min read
How to Insert Line Break in SQL Server String?
In SQL Server there are various datatypes like int, float, char, nchar, etc but especially while we are dealing with text in VARCHAR and NVARCHAR columns, we might run into situations where we need to make the text look cleaner by adding line breaks. This could be for better organization, and readab
4 min read
How can I split multiple joined words?
In many different tasks like Natural Language Processing (NLP), machine learning or preparing data for analysis, splitting joined words is crucial for text processing. If there is the word "SplitMultileJoinedWord", we need to separate the joined words inside the string with spaces like "Split Multip
6 min read
How to Create Navigable Tabs in HTML
Navigable tabs in HTML are interactive elements that allow users to switch between different content sections without reloading the page. Tabs organize content into panels, and users can navigate between them by clicking the tab headers, enhancing user experience through better content management. H
2 min read