css - 如何使高度响应？

Question

如何使文本(标语)的高度响应？
我尝试了 padding bottom，但它不起作用。有没有办法让文本的高度响应？

<p class="logo">LoremIpsum</p>
<p class="tagline">LoremIpsum</p>
<img class="mainImage" src="FullSizeRender.jpg">

CSS:

body{
  background-color: black;
  margin: 0;
}


.logo{
 font-size: 3em;
 color: white;
 text-align: center;
}


.tagline{
 font-size: 0.9em;
 color: white;
 text-align: center;
 position: absolute;
 top:20%;
 /* padding-bottom: 20%;*/
}

.mainImage{
 width: 50%;
 height: auto;
}

Answer 1

尝试将 <p>在 <div> 里面或 <span>并为它们分配高度值。