More than 5 years have passed since last update.

［Safari］inline-blockで横並びにするときの余白調整

Last updated at 2018-12-04Posted at 2017-08-30

inline-block で要素を横並びする際にletter-spacing でのみ余白の調整をしていたところ、
Safari で余白が詰まりすぎることがあったので、メモ。

今までの余白の詰め方

HTML

<ul class="hoge">
  <li class="hoge_child">テキストテキスト</li>
  <li class="hoge_child">テキストテキスト</li>
</ul>

CSS

.hoge {
  letter-spacing: -0.4em;
}

.hoge_child {
  display: inline-block;
  letter-spacing: 0;
}

親要素に font-size: 0 を追加する。
（子要素にテキストが入っている場合、子要素にも font-size を指定する。）

CSS

.hoge {
  letter-spacing: -0.4em;
  font-size: 0;
}

.hoge_child {
  display: inline-block;
  letter-spacing: 0;
  font-size: 任意の値;
}