上节大部分讲的是块元素，这小节讨论下行内元素。行内元素见到最多的就是行内非置换元素em、a
,行内置换元素img

行内元素的布局

基本术语

Anonymous text 匿名文本

<p> I'm <em>so</em> happy!</p> 
'I’m'和 'happy!'是匿名文本

Content area内容区:高度由font-size决定

Inline box 行内盒:高度由line-height决定

Leading: font-size和line-height的差值。差值的各一半被加到内容区的顶端和底端，组成行内盒。
Line box: Line box的边界为行内所有元素inline box的最大值和最小值之间的区域。

常用概念

行内元素的背景应用于内容区及padding区域
非置换元素的padding,borders和margin值对行内元素的垂直效果不起作用，它们不能改变inline-height值。
置换元素的Margins和borders值能改变该元素的inline box的高度，因此也能改变包含该元素的line box高度。
inline box是通过vertical-align属性垂直对齐于line box中。vertical-align属性值有：

top:元素inline-box的顶端与所包含的line box顶端对齐
bottom:元素inline-box的底端与所包含的line box底端对齐
text-top：将元素行内框的顶端同文本行的顶线对齐
text-bottom：文本的底端对齐
middle：中间对齐，通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。
super：上标显示
sub：下标显示
<percentage>：百分比和长度

文本的基线、顶线、中线和底线，还有内容区、行内框和行框的相互关系：

  1. 默认情况下行内元素的对齐方式为：基线对齐（vertical-align : baseline）
  2. 顶端对齐（vertical-align : top）
  3. 文本顶端对齐（vertical-align : text-top）
  4. 底端对齐（vertical-align : bottom）
  5. 文本底端对齐（vertical-align : text-bottom）
  6. 中间对齐（vertical-align : middle）
    中线的定义为：中线位于基线的上方，与基线的距离为小写字母x高度的一半（即0.5ex），而ex同font-size相关，大部分浏览器认为1ex = 0.5em（em同样也是相对单位，不是绝对单位），因此会将基线以上四分之一em处作为中线来对齐。
  7. 上标和下标
    上标（vertical-align:super）使元素的基线相对于基准元素的基线升高，下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。
  8. 长度值和百分比
    和上下标类似，长度值和百分比值可使元素的基线相对于基准元素的基线升高（正值）或者降低（负值）。上下标的移动尺寸是由浏览器确定的，而设定长度值或者百分比，可以精确控制文字上下移动的幅度。百分比与行高有关（line-height）

行高的确定原则：
由前面Leading的定义，我们可知，改变一个元素的行高值能引起与相邻元素的重叠。如当行高小于字体大小的时候。
为避免这种情况出现，可采用以下几种方法避免。

  1. 使用em单位，使得line-heigth的高度跟随元素本身font-size变化。

    p {line-height: 1em;}
    big {font-size: 250%; line-height: 1em;}

2.设置缩放比例值

body {line-height: 1.5;} 1.5倍当前字体值

增加盒属性

由前面讨论可知，padding, margins, 和 borders 可以应用于行内非置换元素. 但是不能改变行高值，也就不能改变行内元素的整体布局了。
如果你为行内元素设置border属性，那么border边界默认是元素的内容区域，也就是font-size控制区，而不是行高值区域，当你再设置padding值时，border会远离文本相应的值距离。但是文本的位置都不会变动，这和我们所说的理论不相冲突。

span {border: 1px solid black;}
span {padding: 4px;border: 1px solid black;}

效果分别如下：

行内置换元素

前面我们简单谈到过，置换元素的Margins和borders值能改变该元素的inline box的高度，因此也能改变包含该元素的line box高度。置换元素为什么也有自己的inline box的高度也就是行高值呢，因为，置换元素需要inline box来垂直定位自己，比如

p {font-size: 15px; line-height: 18px;}
img {vertical-align: 50%;}
<p>the image in this sentence <img src="test.gif" alt="test image">will be raised 9 pixels.</p>
图片相对于基线提升9px

行内块元素

行内块元素在行内的布局就和行内置换元素一样。也就是说，行内块元素基于基线对齐。