かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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 の設定されたコンテナ内に inline-block のある場合

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;
}

👇 inline-block の崩れを抑制

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

.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 だし、思わぬ所にバグ有りなので難解。


[参考]

#11 control(未来)

#11 control(未来)

  • 発売日: 2015/12/18
  • メディア: Prime Video

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