Bootstrap Невидимая область изображения карты после текста изображения

Question

в моем проекте я хочу иметь изображение в заголовке с именем над ним, все это тоже работает, но у меня есть «невидимая» область под изображением, которая, согласно HTML, также принадлежит ссылке в которые являются обоими элементами.

Карта Bootstrap с заголовком изображения , Bootstrap Карта с заголовком изображения 2

Я думаю, что это из-за элемента div с текстом я уже пробовал кое-что в CSS, но пока не смог удалить невидимую часть.

Как решить проблему?

HTML Код:

.img-container .img-content-stats {
  position: relative;
  bottom: 55px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 352px;
  padding: 10px;
  z-index: 5;
}

```
<div class="row">
  <div class="col-md-4">
    <div class="card">

      <a class="img-container" href="#">
        <img class="img-fluid" src="../assets/img/maps/oregon.jpg" alt="Oregon">
        <div class='img-content-stats'>
          <h4 style='text-align: center;'>Oregon</h4>
        </div>
      </a>

      <div class="card-body">
        ...
      </div>

    </div>
  </div>
</div>

Answer 1

Это исправит

.img-container {
    position: relative;
}
.img-container .img-content-stats {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 352px;
    padding: 10px;
    z-index: 5;
}

Answer 2

Добавьте это в свой CSS: h4{margin:0; padding:0;)

Answer 3

Должно быть, вы указали кому-то ширину и высоту в себе CSS проверьте, в чем заключалась проблема, удалите ширину и высоту нежелательной почты, если вы столкнулись с той же проблемой, тогда вы поместите свой код по этой ссылке.