Having trouble vertically lining up inline elements - I want the email image to line up with text on the same line and without causing adverse effects on the flow of sibling elements:
HTML:
<p><span class="purple">phone:</span> 123.123.1234</p>
<p><span class="green">email:</span> <img src="http://www.illuminart.com/tests/img/email.png" alt="" style="width:172px; height:13px" /></p>
<p><span class="purple">phone:</span> 123.123.1234</p>
CSS:
body {
font-family: Verdana, Tahoma, Arial;
font-size: 10pt;
}
p {
line-height: 15px;
}
span {}
img {}
Update: setting the img to vertical-align:middle and changing the line-height from 'px' to 'em' seemed to work better.
CSS:
body {
font-family: Verdana, Tahoma, Arial;
font-size: 10pt;
}
p {
line-height: 1.4em;
}
span {}
img {
vertical-align: middle;
}