How to Create a Hanging Indent With CSS
An HTML block-level element such as a paragraph can be styled with a hanging indent. The element you are styling needs to contain more than one line. The following steps explain how to create a hanging indent with CSS.
- Difficulty:
- Moderate
Instructions
-
-
1
Create the hanging indent using the text-indent property combined with padding-left. It's best to assign the CSS rule to the paragraph or other element using a class. Here's an example class called hanging-indent:
.hanging-indent {
text-indent: -25px;
padding-left: 25px;
} -
2
Note that the actual amount of text-indent is given as a negative number; in this case it's -25px. Then a second rule for padding-left is given; in this case it's 25px. These two values do not have to match. The only thing you must do is use a negative number for the text-indent and a positive value for padding-left.
-
3
A Hanging Indent
The paragraphs in the sidebar on the right side of the page in the image show the effect. Each paragraph in the right sidebar is assigned to the class shown above: .hanging-indent.
-
4
Adding a Border
If you added a border to the rule, the border would surround the entire block level element (see image).
-
1
Related Searches
Resources
Comments
-
johnslaughter
Dec 21, 2009
Use of the P tag is a nice way to do hanging indents, especially if you have a lot. If they are paragraphs that you won't double-spaced, this works well: p { text-indent: -3em; margin-left: 3em; } However, let's say you have a lot of short paragraphs, or sentences, and you don't really want them double-space. Then, this works: p { text-indent: -3em; margin-left: 3em; margin-top: .2em;} The .2em creates just a hint of a larger gap between each line. Making it 0em causes regular single-spacing. You can also create a margin on the right. Just use this: p { text-indent: -3em; margin-left: 3em; margin-top: .2em; margin-right: 150px; } Of course, the specific amounts are up to you. But, these work for me very nicely.
