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 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.
Table of Content
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.
Adding tab space using a pre tag Syntax:
<pre> Contents... </pre>Adding tab space using a pre tag Example:
Here is the implementation of above explained approach.
<!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:
using pre tag
Explanation:
- In the above example we are using uses the <pre> tag to encapsulate text, preserving its original formatting.
- Spaces and tabs within the <pre> tag are displayed as entered, without collapsing or converting them into single spaces.
- Consecutive spaces and tabs are maintained, ensuring proper alignment and layout of the text.
- The <pre> tag is commonly used for displaying code snippets, preserving their original indentation and whitespace.
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.
Adding tab space using inline-block space Syntax:
display: inline-block;Adding tab space using inline-block Example:
Here is the implementaion of above explained apporach.
<!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;">GeeksforGeeks</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:
using CSS
Explanation:
- In the above example we are using CSS for tab spacing.
- .tab class is defined with display: inline-block and margin-left: 20px.
- This creates consistent spacing between text elements.
- Resembles tabs for enhanced readability.
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.
Adding tab space using padding property Syntax:
padding-left : value;
or
padding-right : value;
Adding tab space using padding property Example:
Here we are using the padding property to add tab spaces.
<!DOCTYPE html> <html>
<head>
<script src=
</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
Explanation:
- In this example we ncludes a div element with an embedded paragraph and a button.
- jQuery is used to respond to the button click event.
- Upon clicking the button, jQuery modifies the left padding of the paragraph.
- This action dynamically changes the appearance of the paragraph within the red-colored div.
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.
Adding tab space Using margin property Syntax:
margin-left : value;
or
margin-right : value;
Adding tab space Using margin property Example:
Here we are using margin property to add tab spaces.
<!DOCTYPE html> <html>
<head>
<script src=
</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
Explanation:
- In this example we Contains a div element with a green paragraph inside.
- on button click, jQuery modifies the left margin of the paragraph.
- Shifts the paragraph 60 pixels to the right.
- using CSS for div and paragraph appearance, and jQuery for dynamic adjustment.