图片和文字没有完全对齐

Question

我总是遇到这样的问题，当我并排对齐图像和一些文本时，文本在图像下方有 1-2 像素，所以它看起来并不完全对齐。

<h1>Lorem ipsum dolor</h1>
<p>&nbsp;</p>
<p style="float:left; margin-right:20px; margin-bottom:20px; margin-top:0px;"><img    src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" style="width:200px;"></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

还发了一个fiddle:

http://jsfiddle.net/emdu77z3/

大多数情况下，我给图像 margin-top:1px 或类似的东西，但这是什么原因？有更好的解决方案吗？

Answer 1

我想我明白你的意思了。在顶部，图像总是高于文本。一个简单的解决方法是为图像添加边距。将样式内联不是很好的做法，所以我将其设为 class.

http://jsfiddle.net/emdu77z3/2/

我将 <p> 更改为 <p class="block"> 并给它一个 css 规则：

/*Selects all images within the class "block" */
.block img {
    margin-top:3px;   
}

图片和文字没有完全对齐

Image and text isnt aligned perfectly

html

css

alignment