为什么不能在有背景的锚元素上设置 line-height？ [复制]

Question

我才意识到带有背景的锚标签只会继承它们的行高，你只能通过将锚设置为显示来直接设置它：inline-block;

这是为什么？

http://jsfiddle.net/moefinley/3H3y5/

ul li a {
    display: inline-block;
    line-height: 20px;
}

Answer 1

这是根本原因：

content-area = 在非替换元素中，由元素中每个字符的 font-size 描述的框，串在一起；在 替换元素，元素的固有高度加上任何 边距、边框或内边距

内联框 = 为每个元素添加（半）通向内容区域；对于非替换元素，内联的高度 元素的 box 将完全等于 line-height 的值； 对于被替换的元素，元素的行内框的高度将 完全等于元素的固有高度加上任何 边距、边框或内边距

line-box = 作为行的一部分的内联框的最高点和最低点的边界框

以下行为不属于此描述：

1. 内联元素的背景应用于内容区域 加上任何填充
2. 被替换元素的边距和边框会影响元素的高度 该元素的内联框，并暗示该元素的高度 该行的行框

因此，只有当您使用 inline-block 将其标记为块元素时，您的带背景的 a 的行高才能正常工作。在默认行为下，它只会拉伸行高而不拉伸背景。