The CSS text-indent property specifies the indentation of the first line of text in a block (relative to where it would normally appear).
Whereas margins and padding affect the whole block, text-indent only applies to the first rendered line of text in the element.
This block of text has the left margin set at 30px and the text-indent set to −30px. You can see that any background image or color applies to the "standard" block of text and a hanging indent will spill outside that zone.
“This method could work well for hanging punctuation.” You’ll notice, that the double-quotes are hanging over the left margin.
This block of text has the left padding set at 45px and the text-indent set to −30px. Now the background image or color applies to all the text. The is probably the more typical use case.
This is a much easier way to indent because there won't be any math involved regardless of what your paragraph margins or padding are. Just slap in text-indent:2em; and you are good to go. Actually, in this case the padding-left is 15px and the text-indent is 30px.