【CSS】行内元素相关术语和概念

基本术语和概念

术语

匿名文本：
指所有未包含在行内元素中的字符串。<p>I'm <em>so</em> happy!</p>中，序列“I’m”和“happy!”都是匿名元素。

注意：空格也是匿名文本中的一部分，因为空格与其他字符一样都是正常的字符。

em框：
em框在字体中定义，也成为字符框。实际的字形可能比其em框更高或更矮。font-size的值确定了各个em框的高度。

内容区：
在非替换元素中，内容区可能又两种，CSS2.1规范允许用户代理选择其中任意一种。内容区可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框。
在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。

行间距：
行间距是font-size值和line-height值之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部。行间距只应用于非替换元素。

行内框：
这个框通过向内容区增加行间距来描述。
对于非替换元素，元素行内框的高度刚好等于line-height的值。
对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。

行框：
这是包含该行中出现的行内框的最高点和最低点的最小框。即，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。

概念

• 内容区类似于一个块级元素的内容框。
• 行内元素的背景应用于内容区及所有内边距。
• 行内元素的边框要包围内容区及所有内边距和边框。
• 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；即，它们不会影响元素行内框的高度（也不会影响包含该元素的行框的高度）。
• 替换元素的外边距和边框确实会影响该元素行内框的高度，也可能影响包含该元素的行框的高度。