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>

也是一个小提琴：

http://jsfiddle.net/emdu77z3/

大多数情况下，我给图像保证金最高：1px或类似的东西，但原因是什么？有更好的解决方案吗？

Answer 1

我想我明白你的意思。在顶部，图像始终高于文本。一个简单的解决方法是为图像添加margin-top。将样式内联起来并不是一个好习惯，所以我把它作为一个类。

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

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

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

图像和文本未完全对齐

1 个答案: