img要素間に隙間が出来てしまう (navy)

HTML

<ul>
  <li>
    <p><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></p>
    <p><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></p>
    <p><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></p>
  </li>
  <li><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></li>
  <li><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></li>
  <li><img src="https://placehold.jp/3d4070/ffffff/640x100.png"></li>
</ul>

<ul>
 <li><a href="https://teratail.com/questions/86704">CSS - imgに隙間ができるのですが、解決できません。(86704)｜teratail</a></li>
</ul>

CSS

p, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ul {
    list-style: none;
}
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}