The text-indent property can be actually used to create a nice effect of hanging text, that is, a line of text that
protrudes out of its main container. Suppose, for example, that we have some level-2 headings. We can use negative text indentation this way:
h2 {
font-size: 1.6em;
text-transform: uppercase;
margin-bottom: 0;
color: #444;
letter-spacing: 0.1em;
text-indent: -1em;
}
Bear in mind that the text-indent property works only on the very first line of a block level element. However, this solution doesn't work properly in Internet Explorer 6, because this browser will crop the protruding text. A quick-and-dirty solution for IE6 consists in acertain amount of left padding added to the main container in order to compensate the opposite action of the negative indentation. Unfortunately, in most cases the desired effect will be lost on this browser. You can see the final result of the above code below.
