CSS formatting output differs among Chrome, Firefox and Opera when viewed as source

Question

This question relates to the way CSS looks when you view it as source in a web browser. I like to format the css for my website in such a way that you can scan the whole css file quickly and spend a minimal amount of energy looking for things. Here's an example.

.container
{
    margin:             0 auto;
    padding-left:       10%;
    padding-right:      10%;
    height:             80%;
    width:              100%;
}

However, when you look at the CSS source in Firefox and Opera, the alignment is off about half the time. I think this has to do with they way they treat spaces and tabs, but I'm kind of in the dark as to how to format my CSS so it looks good when you're viewing the source of my site in many browsers. The point here is to communicate my interest in clean looking code to a potential employer or client. It looks fine in my text editor. When I adjust the code for viewing source in Firefox, the indentation is inconsistent in Chrome and Opera. When I adjust it for Chrome and Opera, it's inconsistent in Firefox. This is what I'm seeing and want to correct.

#toggle 
{
    position:               relative;
    top:                    15px;
    text-align:             left;
    margin-left:        0px;
}

Answer 1

This is usually a case of tabs being represented differently by different text readers. This is a common reason why many development shops requires spaces be used instead of tabs. A space is a space. A tab can be the equivalent of two spaces or eight spaces or anywhere in between.