<p>位于div的底部，没有空格

Question

这是我的小提琴：https://jsfiddle.net/dL3667ss/

我的div包含img和p。 img是div的完整大小，它是灰色的。 p是黑色文字，绝对位于img上方。

我希望p文字位于img的底部。问题是它们之间有一个空格，我以红色突出显示。

要解决此问题，我只需修改CSS中的bottom属性，将其设置为bottom: -4px;即可。但后来我又遇到了另一个问题：在我的电脑上它可以工作（两者之间没有空间），但在我的手机中它不起作用。它们之间的空间减小了，但我仍然有一些差距。

有一种方法可以消除这个差距，而不是在负值中使用bottom属性吗？

<div class="wrapper">
  <img src="myimg.jpg" class="image">
  <p class="title">
    My Title
  </p>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  height: 300px;
  position: relative;
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
  background: grey;
}

.title {
  position: absolute;
  font-size: 45px;
  bottom: -4px;
  line-height: 100%;
  text-transform: uppercase;
  font-family: 'Open Sans Condensed', serif;
}

Answer 1

是的..在line-height

上添加0.8em .title

.title{
    line-height: 0.8em; // ADDED THIS
    position: absolute;
    font-size: 45px;
    bottom: -4px;
    line-height: 100%;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', serif;
}

Answer 2

只设置底部：标题类中的-1％

我已经更新了你的小提琴 https://jsfiddle.net/dL3667ss/6/

print row