如何从文本顶部删除 line-height？

Question

我在 line-height 为 2 的文本旁边使用左浮动图像。

如何将图片的顶部与文本的顶部对齐？

折叠由 line-height 创建的 space（在下面的屏幕截图）通过将 line-height 减少到 1 或更小文本不是该项目的选项。
这也将成为网站的默认样式的一部分内容因此手动调整每次出现的边距不是可行。
这不是个例。可能只有文字，只有一个图像、图像后跟文本或文本后跟图像。文字可能是 header 或段落。

有没有办法去掉 line-height 的顶部并加倍 line-height 的底部？

.left {
  float:left;
}
.text {
  line-height:2;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

JSFiddle

虽然 ::first-line pseudo-element 确实接近我的水平尝试这样做，在 Firefox 中减少 line-height 也不起作用它在第一行和第二行之间提供正确的 line-height 换行时的文本行。在这里看到：http://jsfiddle.net/Dqmu8/25/

Answer 1

你是说这个吗？

有图

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

没有图片

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

<div>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 2

看看这个。是你需要的吗？

.left {
  float:left;
  margin-top: .5em;
}
.text {
  line-height:2;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 3

是这样的吗？

.left {
  float:left;
  margin-right: 10px;
}

.right {
  float: right;
  margin-left: 10px;
}

.content p {
  line-height: 2;
}

.content img {
  margin-top: 10px;
}

<div class="content">
  <img class="left" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <img class="right" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 4

添加此样式：

.text {
  transform: translateY(-0.6em);
}

Fiddle

Answer 5

行高 2 将在线上方放置 1/2 em，在线下方放置 1/2 em。所以你只需要从文本的上边距中减去 1/2 em，然后把它加回图像上。如果将图像放在文本流中，无论块类型如何，它都会起作用：

<p>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <p class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<h1>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <h1 class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </h1>
</div>

如何从文本顶部删除 line-height？

How to remove line-height from top of text?

html

css

fonts

text-alignment