将图像设置为与没有默认行高的文本相同的行

问题描述

如果我的文本没有默认的行高值，并且我有向左或向右浮动的图像，那么看起来图像与文本不在同一行开始。有什么我可以做的吗？我知道我可以为图像添加一些上边距，但这是手动工作。我有数百个图像和文本章节，这个问题无处不在。我的问题在这里演示：https://codepen.io/shnigi/pen/VwKmYPb 看起来图像开始在文本上方。

body {
  max-width: 900px;
  margin: auto;
}

p {
  line-height: 4em;
}

img {
  float: left;
  margin-right: 20px;
}

<p><img src="https://via.placeholder.com/350">Messages are used for personal,family,business and social purposes. Governmental and non-governmental organizations use text messaging for communication between colleagues. In the 2010s,the sending of short
  informal messages became an accepted part of many cultures,as happened earlier with emailing.[1] This makes texting a quick and easy way to communicate with friends,family and colleagues,including in contexts.</p>

解决方法

这是因为 line-height 没有定义行之间的空间，但是......你的行的高度，所以你的文本在垂直中间。更多解释：https://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align

您必须计算图像的边距顶部：1/2 line-height - font-size / 2

img
{
  float: left;
  margin-right: 20px;
  margin-top: calc(2em - 16px / 2);
}