Which CSS rules do you use ?
To make a "clean" Lettrin it is recommended to use "
float: left;"
HTML
Code:
<p class="lettrine"><img class="lettrine" src="../Images/lettrine.png" alt="Rentai"/>raesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>
<p class="text">Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas <sub>turpis</sub> <sup>eget</sup> nibh laoreet pharetra.</p>
CSS
Code:
p {
margin: 0.25em 0 0;
}
p.text {
text-indent: 1.25em;
}
p.lettrine {
text-indent: 0;
}
img.lettrine {
display: inline;
float: left;
height: 8em;
margin-top: -0.5em;
margin-bottom: 0;
}
But as having perfect Lettrin is probably impossible with all the subtle differences between the reader, you have to do your best, but accepted compromises and unpleasant surprises.
EDIT: Sorry for the lot of edit, but more I reread my text and more I find precision to make.