Reputation: 3761
I have this html:
<div id="workAllocated">
<h3>Work Allocated</h3>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
And the following CSS:
div#contentarea.profile_edit div {
margin-bottom: 20px;
}
div#contentarea.profile_edit div.col_01 h3 {
font-size: 2.4em;
margin: 0;
}
div#workAllocated p {
margin-bottom: 0px;
border-bottom: 1px solid red;
}
The result looks like this snapshot:
But I need it to looks like this:
The different is the vertical align of the text inside the <p>
tags. It is aligned top-left inside the <p>
container but it should be middle-left. I've tried some tricks as change the line-height and change the display to table-cell and then apply the vertical-align property, but none of them really work.
Thanks in advance!
Upvotes: 1
Views: 9340
Reputation: 743
Just add a height to the p and adjust your line-height to it
//EDIT// oops just saw the other anwser
Upvotes: 0
Reputation: 14365
This works for me: http://codepen.io/anon/pen/LrEcx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div#workAllocated p {
margin: 0px;
line-height: 1;
border-bottom: 1px solid red;
padding: 2px 0;
}
</style>
</head>
<body>
<div id="workAllocated">
<h3>Work Allocated</h3>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>LOREM IPSUM</p>
</div>
</body>
</html>
Upvotes: 1
Reputation: 11303
Set a height for your p's and then set the line height equal to that one.
Upvotes: 7