CSS tab-size

By  on  

The ridiculous tabs vs. spaces debate within code can get just as heated as the JavaScript semi-colon debate.  I'm a tab guy myself but to each their own...just don't work on a project with me if you aren't.  Anyways, I was quite surprised to find that you can set the tab space number of <pre> element code with CSS's tab-size property!

The CSS

The tab-size property takes an integer value representing the number of spaces a tab represents:

/* 4 spaces per tab */
pre {
	tab-size: 4;
}

/* No indentation */
pre {
	tab-size: 0;
}

As you can see, you could even remove indentation all together.  Not recommended but possible.

I love this property as it's especially useful for code-heavy blogs, though it doesn't have much use outside of that.

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

  • By
    Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

Discussion

  1. MaxArt

    Didn’t know about that.
    It’s so basic that I wouldn’t be surprised if that was defined in CSS1.
    But it’s a recent thing it seems, and still vendor prefixed. No sign of support in IE, as Microsoft stubbornly thinks that tabs are as huge as 8 spaces!

  2. Aicke Schulz

    For vendor prefixes and browser support comparison: https://developer.mozilla.org/en/docs/CSS/tab-size

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!