Html 如何处理文本到元素的对齐问题

我的设计师同事显然在他的Photoshop中很好地对齐了他的文本。 当文本周围总是有一些空格时，我如何将他的设计应用到我的代码中？ 我的意思是，我可以摆弄像负边距、线条高度（见示例）之类的东西。但这不是一个解决办法。 这个问题很可能已经出现了

例如：

html:

---

我们都知道“错误”是正确的编码方式。你的设计师错了，不是你的CSS。通常，当我遇到这样的情况时，我会忽略确切的设计，并按照我知道的正确方式来做，然后如果有人抱怨，我会告诉他们这就是网络的工作方式。即使你设置了一个负的边距或者做了一些其他的黑客行为，在其他有不同字体的人的浏览器中，或者有一个更大的字体集，等等，这看起来都是错误的。为什么要为这些黑客行为而烦恼呢？做对就行。

除了“文本周围总是有一些空格，我怎么能将他的设计应用到我的代码中？”之外，我看不到其他问题了……这没有多大意义……“你如何去掉标题上方的空格？”如果你不想帮上忙，请停止拖动……我的建议是删除所有样式，从头开始。通过这种方式，您将了解您编写的代码与结果页面外观之间的因果关系。首先，我可以告诉你，同一个父元素中的两个元素彼此之间并不友好——大多数浏览器默认使用display:block来设置它们的样式。也可以尝试重新设置CSS，比如normalize.CSS，然后从那里开始。我的建议是教育您的设计师如何为web进行设计。

<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>

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;
}