There are different ways you can make a web page easier to read, skim, and digest. Adding images is a great way. Drop caps can also work.
Indentation is another formatting technique that can help organize and present content on the page. Although it’s much more common in print, paragraphs, lists, and bullet points can be intended to break up content on web pages and improve their readability.
In this post, we’ll walk through how you can indent different elements with just a bit of code. We’ll cover:
The CSS text-indent property sets the indentation of the first line in a text block. It can be defined by positive or negative values. If the value is positive, the first line will be indented to the right. If the value is negative, the first line will be intended to the left.
To set the text-indent property in CSS, you can use length values or percentages. Length values, like px, pt, and em, will define a fixed length of empty space. Percentages will define the indentation as a percentage of the width of the parent element.
Let’s take a look at how to use this CSS property to indent text, paragraphs, lists, and more.
How to Indent Text in CSS
You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements.
Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px. Here’s the result:
If you’d like to leave the first paragraph following a subheading flush left but indent every subsequent paragraph, then you can use the adjacent sibling combinator: p + p. Then set the text-indent property to the value you want. Here’s the result:
An ordered list element (<ol>) will indent its list items by default. If you’d like to change the indentation distance, then you can use CSS. In this case, you won’t use the text-indent property. Instead, you’ll use the margin-left or padding-left property.
Let’s say you want to push the list items further over to the right so they appear to be right aligned with the subheading. Then you can set the padding-left property to 20em. Here’s the result compared to a list with default indentation:
Like an ordered list element, an unordered list element (<ul>) will indent its list items — or bullet points — by default. If you’d like to change the indentation distance, then you can use the margin-left or padding-left property.
Let’s say you want to push the bullet points further over to the left instead of the right. Then you can use the margin-left property and set it to a negative value. Here’s the result compared to bullet points with default indentation:
You may run into some issues when trying to apply the text-indent property to HTML elements. The most common issue is if you try to apply this property to inline elements instead of block-level elements. If you try to indent a span element, for example, then the property will not work. But it will work if you apply the property to a paragraph element or another block element. Here’s an example:
Indentation is a formatting technique that can help improve the readability of your web pages. Although it’s much more common to see in print, it’s still important to understand how to indent or change the indentation of paragraphs, lists, and bullet points online. The good news is that it only takes a little bit of HTML and CSS to master.
Originally published Jun 25, 2021 7:00:00 AM, updated June 25 2021