Html 已定位文本在其原始位置留下空间

我在div中放置了一个后跟文本的图像，并使用相对定位将文本放置在图像上，如下所示：

<div><img><p></p></div> 
p {position: relative; top: -250px;}

问题是，在图片下面有一个空间，文本本来应该放在那里，我不知道如何去掉它。使用填充和边距似乎不起作用。我正在使用flexbox制作一个响应性强的站点。如果可能，我还希望使用div填充来定位文本。欢迎提出任何建议

谢谢大家!

必须使用position:absolute来定位图像标题：

HTML:

---

我可以更改您的HTML和CSS以获得所需的输出吗？之所以有空格，是因为position:relative不会从正常文档流中删除空格，如position:fixed和position:absolute。请参阅和

<div class = "imageWrapper">
    <img src = "http://placehold.it/300x200" />
    <p>Image Title</p>
</div>

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.imageWrapper {
    position: relative;
    display: table;
}

.imageWrapper > p {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font: 18px/2 Sans-Serif;
    color: #fff;
}