# Hanging Indents by [ kirupa](https://www.kirupa.com/me/index.htm) | filed under [HTML and CSS](https://www.kirupa.com/html5/learn_html_css.htm) [ Have questions? Discuss this HTML5 / JavaScript tutorial with others on the forums.](https://www.kirupa.com/forum/showthread.php?374594-Tutorial-Using-the-Pythagorean-Theorem-to-Measure-Distance) By default, when lines wrap, they just plop right below where the previous line started from. Take a look at the **# Really Tied the Room Together** heading in the following example to see this default behavior in action: ![](https://www.kirupa.com/html5/images/hanging_indents_short_200a.png) For many cases, that wrapping behavior is exactly what we want. We would never think otherwise. Well...***never*** isn't quite accurate. There may be times when what you and I would actually want is to have the wrapped lines be indented by a fixed amount: ![](https://www.kirupa.com/html5/images/hanging_indents_short_v2_200a.png) In the case of our heading, we want the # character to be visually separated from the rest of the text, so the subsequent lines are indented when wrapped. There is a name for this type of indenting where all lines except the first line are indented. This type of indenting is known as a **hanging indent**. Another common example of this type of indenting has to do with citations: ![](https://www.kirupa.com/html5/images/citation_dude_200.png) Many citation formats require the second (and following lines) to be indented with the first line being flushly aligned to the left margin. There are are probably a billion other reasons as well for wanting a hanging indent that goes beynod the two talked about so far. It doesn't matter what your reason is for indenting wrapped text. If you need to do it, then go for it! This tutorial will help. In the following sections, we will look at how to implement our hanging indent effect using just CSS. Onwards! ## Implementing Hanging Indents The way we will be implementing the hanging indent is by relying on the `padding-left` and `text-indent` CSS properties. To visualize how these properties will work, let's start with our earlier heading text again: ![](https://www.kirupa.com/html5/images/left_margin_200a.png) The `text-indent` property shifts where our first line horizontally starts from. By default, the first line starts from the left with no indentation. For the hanging indent, we want to change that by indenting even further left than the starting point: ![](https://www.kirupa.com/html5/images/left_margin_indent_200.png) This may seem a bit strange at first, but we'll shift everything over back to the right of our line's starting position by using the `padding-left` property: ![](https://www.kirupa.com/html5/images/padding_left_200.png) The end result is our intended hanging indent behavior. We just had to employ some CSS trickery to get the exact effect by playing with the `text-indent` and `padding-left` properties. ## Simple Example Now, before we call it a day, we are going to translate all of the pictures and words from the previous section into some actual CSS that ties it all together. Create a new HTML document and add the following things into it: ```html Hanging Indent

# Really tied the Room Together

Etiam sit amet dapibus ex. Morbi augue massa, pretium sed semper et, tristique tempus velit. Proin tellus sapien, pulvinar et lacus id, sollicitudin facilisis ante. Nullam varius justo a nibh pulvinar, in malesuada turpis vestibulum. Donec hendrerit porttitor rhoncus.

``` Take a few moments to look through all of the HTML and CSS that you see. There isn't a whole lot going on here besides us trying to make some text look nice. Once you have glanced through this file, let's go ahead and preview it in the browser. Save this document, open it in your favorite browser, and resize the browser until the header wraps. If everything worked correctly, you should see something that looks similar to the following image: ![](https://www.kirupa.com/html5/images/hanging_indent_pic.png) What we are going to do is give our header some sweet hanging indent magic! Go back to the HTML and add the following style rule just above the closing `style` tag: ```css #container h1 { text-indent: -26px; padding-left: 26px; } ``` Once you have made this change, save our HTML document and preview in the browser one last time. This time, you should see something that looks like this: ![](https://www.kirupa.com/html5/images/hanging_indent_final.png) Notice that our heading is now properly indented and just hanging out. Going back to the CSS we added, we mentioned earlier that the hanging indent is implemented by using both the `text-indent` and `padding-left` properties: ```css #container h1 { text-indent: -26px; padding-left: 26px; } ``` A negative value for `text-indent` pushes our indentation left. This will shift our first line beyond the starting point for where our eyes would expect text to start from. To offset that, we shift all of our text over by setting the `padding-left` property to a positive version of the value we set for `text-indent`. In our example, we are shifting the indentation and padding by **-26px** and **26px** respectively. The exact value to use is one that you will have to determine based on your font, font size, and desired indentation distance. Phew!