画像の上下にできる隙間をなくしたい

Question

画像の上と右に隙間ができます。
cardとcard__imgにoverflow:hidden;やvertical-align:top;を追加してみましたがダメでした。
position:relative;を消してみましたが変化ありませんでした。
原因わかりますか？
よろしくお願いします。

<div class="card">
          <img src="/img/horse.jpg" alt="" class="card__img">
          <div class="card__body">
            <div class="card__title">タイトル</div><!-- /.card__title -->
          </div><!-- /.card__body -->
        </div><!-- /.card -->

.card {
  border-radius: 5px;
  margin-right: 24px;
  margin-bottom: 24px;
  width: calc(50% - 24px);
  position: relative;
  border: 1px solid #000;
  &:nth-of-type(even) {
    margin-right: 0;
  }
  &__img {
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
    height: 200px;
    width: 100%;
    border-radius: 5px 5px 0 0;
  }
  &__body {
    padding: 24px 16px 8px;
  }
  &__title {
    font-size: 3rem;
  }
}

Comments

[Lhankor_Mhy]

ブラウザのズームはいくつですか？

[7777tata]

100%という表現でいいのでしょうか？ズームはしていません。

Answer 1

borderからbox-shadowに変更しました。

Answer 2

.card に overflow:hidden; を追加して、
.card__img の border-radius を削除したらどうでしょう。

Comments

[7777tata]

右2つのカードの隙間はなくなりました。
左２つの右側の隙間がまだ空いたままですね。