HOW TO INSERT SPACES/TABS IN TEXT USING HTML/CSS?

Tutorials Algorithms Analysis of Algorithms Data Structures Languages Interview Corner GATE ISRO CS UGC NET CS CS Subjects Web Technologies Student Jobs
*

*

*

*

Spacing can be added using HTML and CSS by 3 approaches:

Method 1: Using the special characters designated for different spaces

The character entity used lớn 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 khổng lồ create a space in a line that cannot be broken by word wrap.

Bạn đang xem: How to insert spaces/tabs in text using html/css?

The character entity used khổng lồ denote an ‘en’ space which means half point kích thước of the current phông. This may be perceived as twice the space of a normal space.

The character entity used to lớn denote an ’em’ space which means equal to lớn the point kích cỡ of the current fonts. This may be perceived as four times the space of a normal space.

Xem thêm: Php Json_Encode: How To Convert Php Array To Json Object With Example?


Syntax:

Regular space: Two spaces gap: Four spaces gap: Example:


head>
title>
How lớn insert spaces/tabs in text using HTML/CSS?
title>
head>
body>
h1 style="color: green">obatambeienwasirherbal.comh1>
b>How to lớn insert spaces/tabs in text using HTML/CSS?b>
p>This is a regular space.p>
p>This is a   two spaces gap.p>
p>This is a   four spaces gap.p>
body>

In the above sầu code the regular space & two space & four space gaps code is not visible so here is how it looks

*
Output:
*

Method 2: Using the tab-form size property lớn mix spacing for tab characters

The tab-size CSS property is phối the number of spaces each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using tags).

The tab character can be inserted by holding the Alt & pressing 0 and 9 together.

Syntax:


.tab tab-size: 2; Example:


head>
title>
How to insert spaces/tabs in text using HTML/CSS?
title>
style>
.tab1
tab-size: 2;

.tab2
tab-size: 4;

.tab4
tab-size: 8;

style>
head>
body>
h1 style="color: green">obatambeienwasirherbal.comh1>
b>How to lớn insert spaces/tabs in text using HTML/CSS?b>
pre class="tab1">This is a tab with 2 spaces.pre>
pre class="tab2">This is a tab with 4 spaces.pre>
pre class="tab4">This is a tab with 8 spaces.pre>
body>

Output:

*

Method 3: Creating a new class for spacing using CSS

A new class can be created which gives a certain amount of spacing by using the margin-left property. The amount of space could be given by the number of pixels specified in this property.

The display property is also set khổng lồ ‘inline-block’ so that no line-break is added after the element. This allows the space khổng lồ sit next lớn text và other elements.

Syntax:

.tab display: inline-block; margin-left: 40px;Example:


head>
title>
How to insert spaces/tabs in text using HTML/CSS?
title>
style>
.tab
display: inline-block;
margin-left: 40px;

style>
head>
body>
h1 style="color: green">obatambeienwasirherbal.comh1>
b>How to lớn insert spaces/tabs in text using HTML/CSS?b>
p>This is aspan class="tab">span>tab space in the document.p>
body>

Output:

*

*


My Personal Notes arrow_drop_up
Save sầu
favorite_border Like
Next last_page
Create a string with multiple spaces in JavaScript
Recommended Articles
Page :
MongoDB Insert() Method - db.Collection.insert()
26, Jan 21
How to insert text into the textarea at the current cursor position?
21, Jul 20
How to insert collapsible Text Boxes in New Google Sites ?
10, Sep 20
How to select all text in HTML text input đầu vào when clicked using JavaScript?
28, Aquảng cáo 19
Text Animation with changing the color of the text using HTML & CSS
10, Jun 20
How lớn create long shadow of text without using text-shadow in HTML and CSS ?
17, Jul 20
How khổng lồ place cursor position at kết thúc of text in text input đầu vào field using JavaScript ?
04, Jan 21
How to embed text & text boxes in New Google Sites ?
04, Nov 20
How lớn Set Text of Tkinter Text Widget With a Button?
21, Dec 20
How to lớn insert line break before an element using CSS?
04, Apr 19
How lớn insert HTML content inkhổng lồ an iFrame using jQuery?
12, Sep 19
How to lớn insert single & mutiple documents in Mongodb using Node.js ?
29, Nov 20
How to lớn dynamically insert id into table element using JavaScript ?
15, Nov 20
How lớn Insert Records to a Table using JDBC Connection?
19, Nov 20
How to Insert Form Data inkhổng lồ Database using PHP. ?
14, Dec 20
How lớn insert đoạn phim in web page & play it using HTML ?
14, Dec 20
How to lớn insert some HTML after all paragraphs using jQuery ?
30, Dec 20
How lớn insert a DOM element after all paragraphs using jQuery ?
30, Dec 20
How to lớn insert values into lớn MySQL server table using Python?
03, Jan 21
Insert tags or strings immediately before và after specified tags using BeautifulSoup
02, Mar 21
Program to Insert new thành công in array on any position in PHP
01, Oct 18
unordered_mix insert() function in C++ STL
08, Oct 18
unordered_multimix insert() function in C++ STL
09, Oct 18
PHPhường | DsDeque insert() Function
30, Jan 19
Article Contributed By :
*

sayantanm19
sayantanm19
Vote for difficulty
Easy Normal Medium Hard Expert
Improved By :
Report Issue
What’s New
Data Structures and Algorithms – Self Paced Course
View Details
Ad-Free Experience – obatambeienwasirherbal.com Premium
View Details
Most popular in CSS
Most visited in HTML

Writing code in comment? Please use ide.obatambeienwasirherbal.com, generate links & nội dung the links here.


Load Comments
5th Floor, A-118, Sector-136, Noida, Uttar Pradesh - 201305
feedback
obatambeienwasirherbal.com
Company Learn Practice Contribute
obatambeienwasirherbal.com , Some rights reserved
We use cookies to lớn ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have sầu read & understood our Cookie Policy & Privacy Policy Got It !