为什么文本会超出div？

Question

有人可以解释一下为什么文本超出了div吗？而且我不能垂直居中。 为什么不在ul列表框中？

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: 283px;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}

<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

image here

Answer 1

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: auto;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}

<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

Answer 2

  

字体大小小于div高度，但是由于默认为line-height，因此文本超出了Div范围。

Answer 3

原因是您将height:283px硬编码为.experience-section .figure。由于字体大小较高，因此重叠了。您可以设置自动高度来修复它。