CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる

inline-block な要素は text-indent の値を継承するので、text-indent が設定されたコンテンツ内に fontawesome のアイコンとか inline-block な要素があると意図しない表示崩れを起こすことがあります。(fontawesome のアイコンは display: inline-block)

HTML

<ul class="icon-style-list">
  <li>
    <i class="fas fa-check-square list-icon"></i>
    アイカツ！を見ると幸せになれる
    <a href="#">
      <i class="fas fa-link"></i>
      LINK TEXT
    </a>
  </li>
</ul>

CSS

.icon-style-list {
  icon-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.list-icon {
  text-align: center;
  width: 1.5em;
}

👇 アイコンが inline-block なので親要素の text-indent が引き継がれて表示崩れてしまう

text-indent: 0 又は、display: inline; を設定する

text-indent の設定された要素の中にある inline-block な要素には text-indent: 0 又は、text-indent が引き継がれない display: inline を設定すればOK
個人的には inline-block のまま text-indent: 0 にしてしまう方が width なども効くので扱いやすいかなと思います。

HTML

<ul class="icon-style-list">
  <li>
    <i class="fas fa-check-square list-icon"></i>
    アイカツ！を見ると幸せになれる
    <a href="#">
      <i class="fas fa-link inline"></i>
      LINK TEXT
    </a>
  </li>
</ul>

CSS

.icon-style-list {
  icon-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.list-icon {
  text-indent: 0;
  text-align: center;
  width: 1.5em;
}
.inline {
  display: inline;
}

👇

単純なアイコンだけどうにかする設定にしておきたいなら属性セレクタで丸っと設定しておくのが楽だと思います。

.icon-style-list {
  icon-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;
  
  [class*="fa-"] {
    text-indent: 0;
  }
}

example

See the Pen CSS inline-block inside a text-indent container by KIKIKI (@chaika-design) on CodePen.

　
CSSは全部 global だし、思わぬ所にバグ有りなので難解。

---

[参考]

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

#11 control（未来）

prime になったから見返してるけど C 面白いよね