マークアップ初心者のhtml,css謎現象と対処方法

css,html謎現象

マークアップ時に「おやっ？」と遭遇した謎の現象と、
それに対処した方法を再現しつつメモ

深く追求したい気持ちは山々だけども、
とにかく解決せねばということで解決方法のみです。

原因、対処不可ケース、ブラウザ依存に関しては発見次第随時更新していきたいので、
コメント等大歓迎です！

inline-blockの隙間

現象

メニューなどでよく使うinline-block
「あれっ？」と思った隙間はまずこれを疑うべし！

<div class="parent">
  <div class="child">inline-block</div>
  <div class="child">inline-block</div>
  <div class="child">inline-block</div>
</div>

.parent {
  display: block;
}
.child {
  display: inline-block;
  font-size: 16px;
  background-color: red;
}

対処方法

親要素にfont-size: 0;を指定で解決

    .parent {
      display: block;
      font-size: 0;  ←これ
    }
    .child {
      display: inline-block;
      font-size: 16px;
      background-color: red;
    }