Open
Conversation
Updated the text-indent documentation to include additional syntax examples, descriptions, and usage details. Added a description, clarifying the effects of percentage and negative values.
github-actions
bot
added
Content:CSS
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| - : Indentation affects the first line of the block container as well as each line after a _forced line break_, but does not affect lines after a _soft wrap break_. | ||
| - `hanging` | ||
| - : Inverts which lines are indented. All lines _except_ the first line will be indented. | ||
|
|
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
|
|
||
| The `<length-percentage>` can be a positive or negative value. A negative value creates an outdent equal to the absolute value of the `<length-percentage>` equivalent positive value. A negative value effectively pushes the text the size of the value, but in the opposite direction. For example, `text-indent: 3%;` indents the first line of text , adding white space that is 3% of the container's inner-size before the text, pushing the first line of content toward the inline-end direction. Setting `text-indent: -3%` outdents the first line of text, pushing the start of the first line of text 3% of the container's inner-size past the inline-start of the content area, into the padding and border, possibly overflowing the containter. | ||
|
|
||
| A negative value is different from adding the `hanging` keyword to a positive value. Continuing with the same example, `text-indent: 3% hanging` doesn't outset the first line of text. Rather, it insets all the lines of text _except_ the first line, by 3% of the container's inner-size. |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| A negative value is different from adding the `hanging` keyword to a positive value. Continuing with the same example, `text-indent: 3% hanging` doesn't outset the first line of text. Rather, it insets all the lines of text _except_ the first line, by 3% of the container's inner-size. | |
| A negative value is different from adding the `hanging` keyword to a positive value. Continuing with the same example, `text-indent: 3% hanging` doesn't outset the first line of text. Rather, it insets all the lines of text _except_ the first line, by 3% of the container's inner-size. |
|
|
||
| #### CSS | ||
|
|
||
| Our use the `text-indent` property to indent the first line of each paragraph by `5em`. |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| Our use the `text-indent` property to indent the first line of each paragraph by `5em`. | |
| Our use the `text-indent` property to indent the first line of each paragraph by `5em`. |
|
|
||
| #### CSS | ||
|
|
||
| We set the `text-indent` to a percentage value. We also added padding and vertical stripes to better enable guaging the size of the indentation relative to the element's box model. |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| We set the `text-indent` to a percentage value. We also added padding and vertical stripes to better enable guaging the size of the indentation relative to the element's box model. | |
| We set the `text-indent` to a percentage value. We also added padding and vertical stripes to better enable guaging the size of the indentation relative to the element's box model. |
| text-indent: 30%; | ||
|
|
||
| padding: 30px; | ||
| background-image: repeating-linear-gradient(to right, transparent 0 9.5%, #dedede 9.5% 10%); |
Contributor
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| background-image: repeating-linear-gradient(to right, transparent 0 9.5%, #dedede 9.5% 10%); | |
| background-image: repeating-linear-gradient( | |
| to right, | |
| transparent 0 9.5%, | |
| #dedede 9.5% 10% | |
| ); |
Contributor
|
Preview URLs (1 page) (comment last updated: 2026-04-02 15:36:06) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updated the text-indent documentation to include additional syntax examples, descriptions, and usage details. Added a description, clarifying the effects of percentage and negative values.