Hanging Indents with CSS

We had a need to create hanging indents for paragraphs recently, which turned out to be relatively straightforward through a combination of using text-indent and padding-left properties:

  .hang {
    padding-left: 2em;
    text-indent: -2em;
  }

Paragraphs can then have the hang class applied in order to be presented with hanging indents:

  <p class="hang">
    Lorem ipsum dolor sit amet...
  </p>