flex-boxで折返した子要素の上下の余白を消したい

Question

flex-boxで4つの子要素を2列×2行で、画面幅いっぱいで上下左右ともに余白なく
折返しさせたいのですが、上下の余白がどうしても消えません。
解決方法をご教示頂けると幸甚です。

試したこと

以下の設定を行ってみましたが解決できませんでした。
flex-grow
flex-start

コード

          <div class="worksItem-list">
            <div class="worksItem">
              <img class="worksItem-img" src="img/work_img001.jpg" alt="">
            </div>
            <div class="worksItem">
              <img class="worksItem-img" src="img/work_img001.jpg" alt="">
            </div>
            <div class="worksItem">
              <img class="worksItem-img" src="img/work_img001.jpg" alt="">
            </div>
            <div class="worksItem">
              <img class="worksItem-img" src="img/work_img001.jpg" alt="">
            </div>
          </div>

.worksItem-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.worksItem {
  width: 50%;
}

.worksItem-img {
  width: 100%;
}

Answer 1

img要素にできるスペースかも知れません。
display: block;を追加してみてください。

.worksItem-img {
  width: 100%;
  display: block; /* 追加 */
}

Comments

[退会済みユーザー]

ありがとうございました！
display:blockを追加したら解決しました。
たしかにimg要素にできるスペースのようでした。
勉強になりました。