为什么line-height在img元素上不起作用? [英] Why doesn't line-height work on img elements?

问题描述

MDN 说 line-height 处理内联元素.图像是内联元素.那么为什么 line-height 在img元素上不起作用?这是jsfiddle ，其中行高不会使图像居中.

MDN says line-height work on inline elements. Images are inline elements. Then why doesn't line-height work on img elements? Here is the jsfiddle in which line-height doesn't center the image.

推荐答案

您链接到的页面说:

在替换的嵌入式元素(如按钮或其他输入元素)上，行高无效.

On replaced inline elements such as buttons or other input elements, line-height has no effect.

img 元素已替换内联元素，因此 line-height 对它们没有影响.

img elements are replaced inline elements, so line-height has no effect on them.

如果要设置图像周围线框的线高，则需要一个额外的元素.

You need an extra element if you want to set the line height of a line box around an image.

span {
  line-height: 200px;
}
div {
  outline: solid black 1px;
}

<div>
  Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World
</div>

<div>
  Hello
  <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World
</div>

这篇关于为什么line-height在img元素上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！