为什么不能在具有背景的锚点元素上设置行高? [英] Why can't you set line-height on an anchor element with a background?

问题描述

我只是意识到带有背景的锚点标签将仅继承其行高，您只能通过将锚点设置为display:inline-block;

I've only just realised that anchor tags with a background will only inherit their line-height and you can only set it directly by setting the anchor to display: inline-block;

这是为什么?

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

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

推荐答案

这是根本原因:

内容区域 =在未替换的元素中，由该元素中每个字符的字体大小描述的框串在一起；在 被替换的元素，元素的固有高度加上任何 边距，边框或填充

content-area = in non-replaced elements, the box described by the font-size of each character in the element, strung together; in replaced elements, the intrinsic height of the element plus any margins, borders, or padding

内嵌框 =为每个元素的内容区域添加(一半)引文；对于非替换元素，内联的高度 元素的框将完全等于line-height的值； 对于替换的元素，元素的内联框的高度将为 正好等于元素的固有高度加上任何 边距，边框或填充

inline box = the addition of (half-)leading to the content-area for each element; for non-replaced elements, the height of the inline box of an element will be exactly equal to the value for line-height; for replaced elements, the height of the inline box of an element will be exactly equal to the intrinsic height of the element plus any margins, borders, or padding

行框 =限制行内框内联框的最高点和最低点的框

line-box = the box which bounds the highest and lowest points of the inline boxes which are part of the line

以下行为不属于该描述:

The following behaviors fall out of this description:

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

1. the background of an inline element is applied to the content-area plus any padding
2. margins and borders on replaced elements affect the height of the inline box for that element, and by implication the height of the line-box for that line

因此，仅当您使用inline-block将其标记为块元素时，您在a中使用背景的行高才能正常工作.并且具有默认行为，它将仅拉伸线高而不拉伸背景.

So your line-height for a with background works fine only when you mark it as block element using inline-block. And with default behavior it will just stretch the line height without stretching background.

这篇关于为什么不能在具有背景的锚点元素上设置行高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！