A hanging indent includes an offset of all lines of a paragraph except the first. Hanging indents are useful when you want to add graphics to the beginning of your paragraph. Adding to the list of examples we have about CSS, in today’s article, we will see how to make a hanging indent in CSS.
An example of a paragraph with a hanging indent would be the following:
In a place in La Mancha, the name of which I do not want to remember, not long ago there lived one of those gentlemen with a lance in a shipyard, an old buckler, a skinny nag and a racing greyhound. A pot of something more beef than mutton, salpicón most nights, duels and losses on Saturdays, lentils on Fridays, some extra palomino on Sundays, consumed three parts of his property.
We can observe the displacements of all the lines, except the first one.
By CSS we can define a style to have paragraphs with hanging indents. To do this we have to look for properties that meet the characteristics of French indentation. These properties want the paragraph to be offset to the right, which we achieve using
padding-left
and that the first line is advanced to the left, which we will obtain using
text-indent
.
The style CSS to be able to apply our French indentation it will look like this:
p.french {
text-indent: -30px;
position: absolute;
padding-left: 40px
}
In this code we see that we assign the properties to the element p
and specifically to the class
«French»
. So we will have to use this class and the element p
within our page HTML. The page will look like this:
<p class="French">In a place in La Mancha, in...</p>
In this simple way and managing the properties
padding-left
and
text-indent
, we can create an indentation in CSS. I hope you use it a lot and thus you can improve the indentations within the content of your websites.