使用CSS垂直对齐对象时，从线条高度增加额外空间

我经常需要将图像与旁边的文本块垂直对齐

像这样：

问题在于，由于文本的行高，文本上方出现了额外的空间：

我不能仅仅删除行高，因为这是一个多行文本块，需要非常大的行高

我提出的唯一解决方案是在文本顶部应用

边距顶部：-5px

，使其与图像在光学上对齐

然而，这似乎是一个脆弱的解决方案，因为对页面行高的任何更改都会使对齐失效

还有其他防弹解决方案吗？

选择第p:n个子项（2）并添加线条高度，以便第一个p不会有线条高度。

根据需要设置文本样式

只需在该文本区域周围环绕一个

div

，即可定义该区域在页面上的位置

（我更稳定/语义/跨浏览器友好，而不仅仅是设置标签的样式来定位。）

---

您可以使用注释中提到的@HonoreDoktorr来完成此操作，使用

垂直对齐：text top

是对齐它的正确方法。此样式需要添加到

img

标记或图像标记上的css类中。参见其应用示例

下面是两个使用不同html结构的示例

这些代码可能与您的代码相似

<div>
    <div class="image"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" /></div>

    <div class="text">dfgdfg</div>
</div>

这里的神奇之处在于

垂直对齐：文本顶部。我将样式放在
img
标记上，但是您可以轻松地向需要它的图像添加一个类，因此并非所有图像都具有该样式。注意，
行高
设置在包含图像和文本的div上，以便它们正确匹配。在FF和铬上测试

您还可以查看垂直对齐的良好可视化效果
您可以使用em或rem定义边距，但是CSS并不完全精通排版。将它们都包装到一个容器中，并设置特定的
上下边距
并删除文本的
行高
您是否尝试过img上臭名昭著的：display:inline block？设置
垂直对齐：text top
可以做您想做的事情。@HonoreDoktorr是正确的，我只在FF上测试过，但我认为它需要一个特定的html结构，仅仅用于文本格式，你不认为吗？是的，但大多数CSS都很笨重，只是碰巧我就是这么想的。我并没有自称是专家，只是想给我一杯茶。但如果第一段的间距超过1行，那么第一段的间距就不会与其他段落的间距相同，浏览器的宽度将决定该段何时出现wrapsTrue@Huangism，没有人知道有更好的答案：）这不是还有同样的问题吗？当行高度发生变化时，文本将不对齐。您的想法是将wrapper div移近上面的元素。显示的空间更少。在我看来，这是一个比页边空白顶部更稳定、跨浏览器友好的解决方案：或标签上的-4px。是的，我认为
垂直对齐：文本顶部是使用或其他全局标记的方法吗？请参阅我的答案
.cooltext { 
   margin-top:-4px; // where you want this in the page
   width: 200px; // however in relation to layout
   height: 150px; // however in relation to layout
}


.nacholibre { 
   line-height: 12px; // text formatting
   display: inline-block;
}

<div>
    <div class="image"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" /></div>

    <div class="text">dfgdfg</div>
</div>

img {
    vertical-align: text-top;
}
div {
    line-height: 40px;
    margin: 0;
}
.image, .text {
    float: left;
}