How to create an all browser-compatible hanging indent style in CSS in a span

The only thing I've found has been;

.hang {
    text-indent: -3em;
    margin-left: 3em;
}

The only way for this to work is putting text in a paragraph, which causes those horribly unsightly extra lines. I'd much rather just have them in a <span class="hang"></span> type of thing.

I'm also looking for a way to further indent than just a single-level of hanging. Using paragraphs to stack the indentions doesn't work.

Solution

<span> is an inline element. The term hanging indent is meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on <p> or <div> or any other block element to get rid of extra vertical space between paragraphs.

You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.