折り返したときにリスト間に空間が入ってしまう

Question

リストを指定幅で折り返して複数行表示にしようと思っています。
折り返しは上手くいくのですが、1行目と2行目の間にリストの高さ以上の間があいてしまいます。
どうすれば指定したリストの高さで折り返し表示できるのでしょうか？

<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
</ul>

ul {
  width: 200px;
}
li {
  display: inline-block;
  height: 20px;
  line-height: 20px;
}
li a {
  display: block;
  height: 20px;
}

Answer 1

inline-blockで並べるとhtmlソースの改行を空白1文字として認識してしまうので
なんとか避けないといけません。

<ul>
  <li><a></a></li><li><a></a></li><li><a></a></li><li><a></a></li>
</ul>

こうすると多分直ります。
cssでulのfont-sizeを0にしてliで戻すという手もありますがおすすめできません。

ul {
  width: 200px;
  /*ここで0*/
  font-size:0;
}
li {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  /*ここで戻す*/
  font-size:1rem;
}
li a {
  display: block;
  height: 20px;
}

display:flex;を使うのが楽でいいと思います。