By default, HTML pages ignore anything more than a single space, and collapse the excess to take up no space at all. The most common way to compensate for this behaviour is to specify margin or padding to the left or right of an element as a substitute for spaces, which remains the best solution in most cases. But there are occasions in which you’ll want to preserve the actual space characters: indentation before lines of code, for example.

CSS supports this in the form of tab-size.

If I have some sample code:

<pre><code>ol.generic-class {
	property: value;
}</code></pre>

It's possible to preserve the tab before the “property: value" line with tab-size, currently supported by all browsers except IE / Edge.

To enable the property, and provide a graceful fallback in IE, set the white-space property to pre, while setting tab-size to the equivalent of 4 spaces:

code {
	white-space: pre;
	tab-size: 4;
}

Visually, this produces the following:

ol.generic-class {
	property: value;
}

You could also use :before or :after generated content to produce spaces, rather than trying to preserve tabs. Generally I’d suggest using margin or padding instead, but this is an option:

code:before {
	content: "        ";
	whitespace: pre;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.