0

如果我的文本没有默认的 line-height 值，并且我有向左或向右浮动的图像，那么看起来图像不是从与文本相同的行开始的。我能做些什么吗？我知道我可以为图像添加一些上边距，但这是手动工作。我有数百个图像和文本章节，这个问题无处不在。我的问题在这里演示：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>

4

2 回答 2

1

一个近似值是重置line-height第一行的，但这将使与下一行的间隙小于其他行：

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

p {
  line-height: 4em;
}

p::first-line {
  line-height: initial;
}

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>

于 2021-01-11T14:22:35.340 回答
0

这是因为 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);
}
于 2021-01-11T14:22:25.297 回答