I have a <p>
element that I put inside of a box. As a result the single line of text has collapsed into multiple lines of text. How to I space the multiple lins of text out vertically?
<div >
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span >8 months ago</span>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Andrew M.</p>
</div>
<div ><span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span >2 months ago</span>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Kenneth W.</p></div>
<div ><span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span >2 days ago</span>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Regina T.</p></div>
</div>
<style>
.testimonials-container {
margin-top: 3em;
width: 100%;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.testHeading {
text-align: center ;
margin-top: 2em;
}
.test {
text-align: left;
text-indent: 2em;
}
.checked {
color: orange;
}
.date {
margin-left: 1em;
}
p {
margin: 10px 0;
}
</style>
CodePudding user response:
Use line-height
property in css for your <p>
tag.
.test {
line-height: 10px; //Or some other value to adjust
}