Insert Spaces and 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.

In this article we are having some text content, our task is to insert Spaces/Tabs in text using HTML and CSS.

Approaches to Insert Spaces/Tabs in Text

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

  • Non-breaking space
  • ASCII code for a regular space

Example

In this example, emsp and ensp HTML Entities has been used.

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <title> Inserting Spaces/Tabs in Text Using HTML and CSS </title> </head> <body> <h2> Inserting Spaces/Tabs in Text Using HTML and CSS </h2> <p> In this example, we have used <strong>HTML Entities </strong> to insert spaces/tabs in text using HTML and CSS. </p> <hr> <p> Adding   four space gap with <strong>emsp</strong>, now adding   two spaces gap with <strong>ensp</strong>. </p> </body> </html>

Using CSS margin or padding

For larger spacing or "tab-like" gaps, using CSS properties like marginor padding is often more practical. These properties allow you to create space around elements, simulating the effect of a tab.

  • We have used span tag with classes tab and tab2 to insert blank space to the required places.
  • We have used margin-left property to insert a space of 40px between words in first paragraph.
  • We have used padding-left property to insert a space of 80px between words in second paragraph.

Example

In this example, margin-left and padding-left has been used.

Open Compiler
<!DOCTYPE html> <html> <head> <title> Inserting Spaces/Tabs in Text Using HTML and CSS </title> <style> .tab { display: inline-block; margin-left: 40px; } .tab2 { display: inline-block; padding-left: 80px; } </style> </head> <body> <h2> Inserting Spaces/Tabs in Text Using HTML and CSS </h2> <p> In this example, we have used <strong>margin-left </strong> and <strong>padding-left </strong> properties to insert spaces/tabs in text using HTML and CSS. </p> <hr> <p> It has 40px <span class="tab"></span>tab space in the document using margin-left. </p> <p> It has 80px <span class="tab2"></span>tab space in the document using padding-left. </p> </body> </html>

Using pre Tag for Preformatted Text

Another option is to use the <pre> tag, which displays text exactly as it's typed in the HTML, including spaces and line breaks.

Example

In this example, pre tag has been used.

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <title> Inserting Spaces/Tabs in Text Using HTML and CSS </title> </head> <body> <h2> Inserting Spaces/Tabs in Text Using HTML and CSS </h2> <p> In this example, we have used <strong>pre</strong> tag to insert spaces/tabs in text using HTML and CSS. </p> <hr> <pre>This sentence have 3 spaces.</pre> <pre>This sentence have 4 spaces.</pre> <pre>This sentence has random number of spaces.</pre> </body> </html>

Conclusion

These techniques allow you to control spacing in your HTML content without relying on hacks or workarounds. Experiment with these methods to find the best approach for your layout and design needs!

Updated on: 2024-11-28T10:29:16+05:30

148 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements