我在 magento 2 中的横幅标题有问题答案

【问题标题】：I'm having problem with my banner title in magento 2我在 magento 2 中的横幅标题有问题
【发布时间】：2020-03-17 21:46:52
【问题描述】：

我对这个横幅有疑问。目前，我在 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 元素和一些文本所发生的情况。 See Image

没有 h3 元素（以及我想要的方式，但内部有字体） See image

【问题讨论】：

标签： html css magento magento2

【解决方案1】：

通常 H 标签有边距。检查开发工具上的 h3，可能会在底部添加额外的空间。

我认为#box3 h3 应该有一个margin-bottom: 0;，我可能会解决你的问题

【讨论】：

【解决方案2】：

我希望下面的示例有所帮助。

#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>

【讨论】：