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

Question

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.

Edit: Answer

I don't know why I even thought of stacking paragraphs for a further level of hang, when I could just create more classes with large margins on the left.

.hang {
    margin-top: 0px;
    margin-bottom: 0px;
    text-indent: -3em;
    margin-left: 3em;
}

Answer 1

<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 widely supported by browsers.

Answer 2

I'm not sure what you mean by "extra line" when using a paragraph.

At any rate, the :first-line pseudo-class selector might do the trick, depending on what you're trying to do. If the first line of your paragraph will be indented less or more than the rest of the block, you can do something like this:

p {
  padding-left: 0;
}

p:first-line {
  padding-left: 10px;
}

This would create something like a standard paragraph indentation. As mentioned above, you could get tweak line-heights and paragraph-to-other-element spacing using the appropriate CSS properties of the paragraph.