how to cope with text to element alignment issues - html

Question

My designer colleague obviously aligns his text nicely justified in his Photoshop.
How can I apply his design to my code when there will always be some space around text?
I mean I can fiddle with things like negative margin, line-height (see example) or anything. But that can't be a solution.
This question most likely arose already
An example: http://jsfiddle.net/bfpPS/
html:
<section>
<h1 class="wrong">WRONG</h1>
<img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
<h1 class="right">Isn't it beautiful!</h1>
</section>
css:
section, img, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.4285714285714em;
vertical-align: baseline;
background: transparent;
font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0;
}
img {
height: auto;
max-width: 100%;
width: 50%;
float: left;
}
h1 {
font-size: 2em;
}
.wrong {
float: left;
}
.right {
line-height: 0.7em;
}

Answer 1

We all know that "WRONG" is the right way to code this. Your designer is wrong here, not your CSS. Normally when I encounter situations like this, I ignore the exact design and do it how I know is the right way to do it, and then if anyone complains, I tell them that's how the web works. Even if you set a negative margin or do something else hacky, it's going to look wrong in someone's browser who has a different font available or a larger font size set, etc. Why bother with the hacks? Just do it right.