CSS Properties: How to set the tab-size of a pragraph element

Last update on February 24 2024 12:26:19 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set the tab-size of a paragraph element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
p#tab { /* Styles paragraphs with the id "tab" */
  -moz-tab-size: 5; /* Sets the tab size for Mozilla Firefox */
  -o-tab-size: 5; /* Sets the tab size for Opera */
  tab-size: 5; /* Sets the tab size for other browsers */
  white-space: pre-wrap; /* Specifies how white-space inside the element is handled */
}
p#tab1 { /* Styles paragraphs with the id "tab1" */
  -moz-tab-size: 10; /* Sets the tab size for Mozilla Firefox */
  -o-tab-size: 10; /* Sets the tab size for Opera */
  tab-size: 10; /* Sets the tab size for other browsers */
  white-space: pre-wrap; /* Specifies how white-space inside the element is handled */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<p id="tab"><!-- Displays a paragraph with the id "tab" -->
  w3resource web development tutorial <!-- Text content of the paragraph -->
</p><!-- Ends the "tab" paragraph -->
<p id="tab1"><!-- Displays a paragraph with the id "tab1" -->
  w3resource web development tutorial <!-- Text content of the paragraph -->
</p><!-- Ends the "tab1" paragraph -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the tab size of paragraph elements using CSS.
CSS comments are added to explain each section of the code.
Two CSS selectors are defined:

p#tab styles paragraphs with the id "tab".
p#tab1 styles paragraphs with the id "tab1".

The tab-size property is used to specify the width of tab characters in the paragraphs.
Vendor-specific prefixes (-moz- and -o-) are included to ensure compatibility with older versions of Firefox and Opera browsers.
The white-space: pre-wrap; property ensures that white-space is preserved in the paragraphs and line breaks are honored.

Live Demo :

See the Pen tab-size-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page