为什么不能在锚元素上设置线高？ [英] Why can't you set line-height on an anchor element?

问题描述

我只是刚刚意识到锚标签只会继承自己的行高，你只能通过设置显示的锚点直接设置：inline-block;

为什么？

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

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

解决方案

/ p>

content-area =在未替换的元素中，由每个字符的字体大小描述的框元素，串在一起; in
替换元素，元素的内在高度加上任何
边距，边框或填充

inline box =导致每个元素的内容区域的（半）的添加;对于未替换的元素，元素的内联
框的高度将精确等于line-height的值;
替换替换的元素，元素的内联框的高度
正好等于元素的内在高度加上任何
边距，边框或填充

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

以下行为不属于此描述：

1. 内联元素的背景是应用于内容区
   加上任何填充


2. 替换的元素的边框和边框会影响该元素的
   内联框的高度，
   
   
   code>仅当使用 inline-block 将其标记为块元素时，背景才能正常工作。而且使用默认行为，它只会拉伸线条高度而不拉伸背景。
   
   

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

   Why is this?

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

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

   解决方案

   Here is root cause :

   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

   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. 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

   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屋！