为什么我的物体具有不同的高度，即使我给它们相同？

Question

我的HTML：

.title-card {
  display: block;
  height: 56.25vw;
  width: 100%;
}

.title-overlay .title {
  color: white;
  background-color: rgba(255, 0, 0, 1);
  font-weight: 100;
  font-size: 2em;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 1em;
}

.title-overlay {
  position: absolute;
  left: 15%;
  display: table;
  width: 70%;
  height: 56.25vw;
}

.background {
  position: absolute;
  width: 100%;
  height: 56.25vw;
}

.background-overlay {
  font-size: 0;
}

<div class="title-card">
  <div class="background-overlay">
    <img src="https://i.ytimg.com/vi/3RMr6m1B-qM/maxresdefault.jpg" class="background">
  </div>
  <div class="title-overlay">
    <div class="title">
      Hello there, and welcome! This site is still unfinished but feel free to look around.
    </div>
  </div>
</div>

如您所见，我的所有高度都设定为56.25vw。但是，在实际页面中，标题卡和背景的高度为698.52px，而标题叠加的高度为698.18px。根据我的计算器，698.52px应该是正确的高度。那么为什么我的标题叠加更短？

Answer 1

 eventSources: [
// your event source
{
    url: 'Absent/showLogs', // use the `url` property
    color: 'green',    // an option!
    textColor: 'white'  // an option!
},
{ 
    url: 'Absent/showAbsentLogs', // use the `url` property
    color: 'red',    // an option!
    textColor: 'white'  // an option!

}
]

.title-card {
    display: block;
    height: 56.25vw;
    width: 100%;
}

.title-overlay .title {
    color: white;
    background-color: rgba(255, 0, 0, 1);

    font-weight: 100;
    font-size: 2em;

    display: table-cell;

    vertical-align: middle;
    text-align: center;

    padding: 1em;
}

.title-overlay {
    position: relative;
    left: 15%;

    display: table;

    width: 70%;
    height: 60vw;
}

.please-work {
    position: absolute;
    overflow: hidden;
    
    width: 100%;
    height: 56.25vw;
}

.background {
    position: absolute;

    width: 100%;
    height: 56.25vw;
}

.background-overlay {
    font-size: 0;
}

好吧，我发现自己是一个令人厌恶的“修复”。我对此并不满意，但如果它有效，那么我认为它可行。