У меня проблема с заголовком моего баннера в magento 2

Question

У меня проблема с этим баннером. В настоящее время я работаю в Magento 2, и я должен установить этот баннер. Все в порядке, пока я не вставлю немного шрифта внутрь.

Вот мой код, но сначала посмотрите на изображения ниже.

#box3 h3 {
    font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-transform: none;
    font-style: italic;
    display: inline-block;
    margin-right: 15px;
    margin-left: 15px;
    bottom: 43px;
    color: white;
}

    #font3{
    font-size: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));
    display: inline-block;
    text-transform: none;
    bottom: 43px;
    color: white;
}

@media only screen and (max-width: 370px) {
  /* For mobile phones: */
  .breakpointbr {
    display: block;
  }
}

<br class="breakpointbr">
<div class="item">
<div id="box3">
<img src="https://via.placeholder.com/605x350.png/09f/fff" alt="chicken" width="605" height="350" />
<h3>Here We Are</h3><a id="font3" href="#">See Products</a>
</div>
</div>

Вот что происходит с элементом h3 и некоторым текстом. См. Изображение

Без элемента h3 (и так, как я хочу, но с внутренностями шрифта) См. Изображение

Answer 1

Надеюсь Ниже пример поможет.

#box3 {
  position: relative;
}
#box3 h3 {
  font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-transform: none;
  font-style: italic;
  color: white;
  margin-bottom: 0;
  display:inline-block;
}

#box3 .inner-text {
  position: absolute;
  bottom: 20px;
  left: 0;
  margin-right: 15px;
  margin-left: 15px;
  display:inline-block;
}

#font3 {
  font-size: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));
  text-transform: none;
  color: white;
  margin-left:10px;
}

@media only screen and (max-width: 370px) {
  /* For mobile phones: */
  .breakpointbr {
    display: block;
  }
}

<br class="breakpointbr">
<div class="item">
  <div id="box3">
    <img src="https://via.placeholder.com/605x350.png/09f/fff" alt="chicken" width="605" height="350" />
    <div class="inner-text">
      <h3>Here We Are</h3>
      <a id="font3" href="#">See Products</a>
    </div>
  </div>
  <div id="box3">
    <img src="https://via.placeholder.com/605x350.png/09f/000" alt="chicken" width="605" height="350" />
    <div class="inner-text">
      <h3>Here We Are</h3>
      <a id="font3" href="#">See Products</a>
    </div>
  </div>
  <div id="box3">
    <img src="https://via.placeholder.com/605x350.png/09f/951" alt="chicken" width="605" height="350" />
    <div class="inner-text">
      <h3>Here We Are</h3>
      <a id="font3" href="#">See Products</a>
    </div>
  </div>
</div>

Answer 2

Обычно теги H имеют запас. Осмотрите h3 на инструментах разработчика и, возможно, это добавит дополнительное пространство внизу.

Я думаю, #box3 h3 должно иметь margin-bottom: 0;, и ваша проблема может быть решена мной