Setting Tab Sizes in HTML with CSS tab-size Property

css
Published on April 9, 2019

Setting width for the Tab key can change the look for textboxes and <pre> element. With the tab-size CSS property you can set the length of spaces rendered for the tab character.

#element {
	/* set size of tab key to 4 white spaces */
	-moz-tab-size: 4;
	tab-size: 4;
}

By default, the tab character is set to 8 spaces.

The prefix -moz is required for Firefox, even for its latest version.

Tab Character Code for HTML Pages

The code &#9; renders a tab character in web pages.

Only the <pre> tag or elements having CSS white-space: pre will display the tab character.

Demo

for($i=0; $i<10; $i++) {
	if($j > 10) {
		echo 'Hello';
	}
}

HTML & CSS

<pre id="demo">
for($i=0; $i<10; $i++) {
&#9;if($j > 10) {
&#9;&#9;echo 'Hello';
&#9;}
}
</pre>
#demo {
	-moz-tab-size: 8;
	tab-size: 8;
}
In this Tutorial