Affecting Percentage on text-indent is now relative to containing block instead of the parent

Published: | Categories: CSS

Description

Previously, when a percentage value was used for the text-indent CSS property, it was resolved against the content width of the containing block’s parent element. It means the following p element would have 50px of indent, not 20px.

<div style="width: 500px;">
  <p style="width: 200px; text-indent: 10%;">
    Hello World!
  </p>
</div>

This weird behaviour has been solved in the latest CSS spec. Firefox 65 has made the change along with Chrome 72, so the value will be resolved against the width of the containing block itself from now on. You may want to double check your stylesheets as indents could be shorter than before in some cases like the example above, which will be 20px as expected. In fact, the BBC homepage is known to be affected.

References