The good news is that it only takes a little bit of HTML and CSS to master.Microsoft Word: How to Indent Text in a Documentįormatting text in MS Word is both pleasingly simple and annoyingly complicated.
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. Indentation is a formatting technique that can help improve the readability of your web pages. See the Pen Text-indent Not Working by Christina Perricone ( on CodePen. But it will work if you apply the property to a paragraph element or another block element. If you try to indent a span element, for example, then the property will not work. The most common issue is if you try to apply this property to inline elements instead of block-level elements. You may run into some issues when trying to apply the text-indent property to HTML elements. See the Pen by Christina Perricone ( on CodePen. Here’s the result compared to bullet points with default indentation: Then you can use the margin-left property and set it to a negative value. Let’s say you want to push the bullet points further over to the left instead of the right. If you’d like to change the indentation distance, then you can use the margin-left or padding-left property. Like an ordered list element, an unordered list element () will indent its list items - or bullet points - by default. Here’s the result compared to a list with default indentation: Then you can set the padding-left property to 20em.
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. Instead, you’ll use the margin-left or padding-left property. In this case, you won’t use the text-indent property. If you’d like to change the indentation distance, then you can use CSS. How to Indent List in CSSĪn ordered list element () will indent its list items by default. Then set the text-indent property to the value you want. 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.
How to Skip Indent on First ParagraphĪccording to The Chicago Manual of Style, you can either indent the first line of text following a subheading or leave it flush left. See the Pen How to Indent Paragraphs in CSS by Christina Perricone ( on CodePen.
It will only indent the first line by default. In the example below, let’s use a percentage. Just use the CSS type selector p and set the text-indent property to the value you want. You can use the CSS text-indent property to indent paragraphs using the same steps above. Then, using the CSS type selector div, set the text-indent property to 50px. Say you want to indent all div elements containing text on a page to the right by 50px. You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements. Let’s take a look at how to use this CSS property to indent text, paragraphs, lists, and more. Percentages will define the indentation as a percentage of the width of the parent element. Length values, like px, pt, and em, will define a fixed length of empty space. To set the text-indent property in CSS, you can use length values or percentages. If the value is negative, the first line will be intended to the left. If the value is positive, the first line will be indented to the right. It can be defined by positive or negative values. The CSS text-indent property sets the indentation of the first line in a text block. why text-indent property might not be working.how to indent paragraphs except the first.In this post, we’ll walk through how you can indent different elements with just a bit of code. 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. Indentation is another formatting technique that can help organize and present content on the page.