CSS Quickies: text-indent

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all the questions.

Lets talk about text-indent in CSS

Sometimes it is needed to indent text on a website. This helps the user to quickly scan the page and understand the context of what he/she is looking at. The first-line Indentation is a common thing in books and magazines. In some scientific papers, it is required to indent every paragraph.

CSS has a property to achieve this behavior. It is called 'text-indent'.

How to use it

You can use typical values, like px, rem, rm, and percentage. The most simple example would be the following.

p {
    text-indent: 4rem;
}
p {
    text-indent: 20%;
}
p {
    text-indent: 100px;
}

The text-indent will indent the first line of your text to the specified amount. With the full-lengths like px, it is clear how much indented it will be, but what about the percentage? How is the percentage calculated? The percentage refers to the width of the containing block. So if the element your text is in is 100px and you won't to indent 20%, then you will have an absolute value 20px. Easy right?

negative indent.

The neat thing about this property is that it will accept a negative length. So we can move the text not only to the right but also to the left. This technic is called "hanging indent" and it used in books and magazines and can elevate your design above the of your competitors.

p {
  text-indent: -2rem;
}

I created a codepen example. In this example, you can play around with text-indent.

each-line and hanging

each-line andhanging` are not implemented in any browser as I'm writing this article in November 2019. So please don't use them in production code. I can not even show you an example. This is how experimental this is.

each-line: the Indentation affects the first line of the block container as well as each line after a forced line break but does not change lines after a soft wrap break.

and

hanging: Inverts which lines are indented. All lines except the first line will be indented. We created this on our own.

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube