line-height,vertical-align,margin,padding对行框高度的影响

line-height,vertical-align,margin,padding对行框高度的影响

我们知道，在行内布局中，每行的一个或多个行内元素组成行框，行框是包含改行出现的行内框的最高点和最低点的最小框。只要确定了每个行内框的高度以及摆放位置，即确定了行框的高度。

行内元素的摆放位置

行内元素的摆放位置与vertical-align有着密不可分的关系，默认情况下，vertical-align的值是baseline,baseline要求一个元素的基线与父元素的基线对齐，以让一行中所有元素的文本都对齐。
当一个元素有基线时（普通的文本元素），浏览器确实会使元素的基线与父元素的基线对齐
当一个元素没有基线时，如替换元素（图像或表单输入元素），那么该元素 的底端与父元素的基线对齐。（这也导致了当表格中只有一个图像了，一些浏览器会使基线的下方，即图像的下方出现一些空白，而另外一些浏览器则会把图像紧紧包裹起来，不会出现空白。）

行内框的高度

我们知道，行内框的高度最初是等于内容区的高度上叠加的，叠加的因素可能有几种，比如line-height,padding,margin

line-height对行内框高度的影响

作用于行内非替换元素时，line-height的值等于行内框的高度（可能大于也可能小于font-size值）。
作用于行内替换元素如img时,line-height的值不会直接应用于行内框，但是在为vertical-align设置了百分数时，为会以line-height的值为基础，乘以百分比，行内框会以这个值为准上移或下移一段距离。

vertical-align对行内框高度的影响

vertical-align取值有很多种：baseline,sub,super,top,text-top,bottom,text-bottom,百分比，数字值等。
它的取值可能会影响行内框的高度，如（百分比：相对于元素的font-size的百分比值，数字值：相对于元素font-size的系数值）。
还有一种情况是不会影响元素行内框的高度，但会影响元素相对于父元素的摆放位置，如top:将元素行内框的顶端与行框的顶端对齐，bottom则反之；text-top:指的是行内文本的底端。对于替换元素，因为其不是文本，则会假设有一个默认的文本区域行内框，font-size值取父元素的font-size值，放在行中，替换元素的底端则与这块默认的文本区域行内框的底端对齐；还有super,sub分别设置行内框在行的上方，下方等等

paddding对行内框高度的影响

padding是内边距，首先，内边距不能为负值，在我们的印象中，当为一个元素设置了上下的内边距时，元素的高度会增加，那么事实真是这样吗？
首先来看上下内边距应用于行内非替换元素会有何影响。
文档内容如下

<p>This is a normal inline element.<span class="span1">This is a normal inline element in a span.</span>This is a normal inline element.This is a normal inline element.</p>
段落p的样式如下：
p {width:580px;border:1px solid black;margin:0;padding:0;}
对span元素分别应用不同的两种样式：

• 样式一：
  .span1 {background:yellow;}
• • 样式二：
    .span1 {background:yellow;padding:20px 0 20px 0;}

图1 样式一

图一 样式二
如上图，分别是应用样式一和样式二后段落的效果，两个样式的区别是第一种样式中内边距均为0，而样式二中为上下内边距设置了20px的值，二从图中结果看来，所设置的padding值并没有对span的行内框的高度span内文字的基线位置产生任何影响，更加不会影响所在文本行的高度，但可以看到padding值还是带来了某种视觉效果的，如图2 中，padding值设置后，背景色的范围明显变大了。
所以说，对行内非替换元素来说，上下内边距的设置会影响背景色的范围，除此之外，不会对内容区和行内框产生任何影响。
当上下内边距应用于行内替换元素如图片时，又是否会影响行框的高度呢？
文档内容如下：
<p>This is a normal inline element.<img src="./a.PNG"/>This is a cnormal inline element in a span.</span>This is a normal inline element.This is a normal inline element.</p>
文档的基础样式如下：
段落p的样式如下：
p {width:580px;border:1px solid black;margin:0;padding:0;line-height:50px;}
对img元素分别应用样式三、四

• 样式三：img {height:50px;}
• 样式四：img {height:50px;padding:30px 0;}
  
  图三：样式三
  
  图四：样式四
  其中样式三未对图像设置padding值，而样式四队图形的上下padding分别设置了30px;从图三图四的对比可以看到设置了上下内边距后，确实把行内框在垂直方向上撑开了，进而行框的高度也变大。
  所以说，对行内替换元素（如图像）来说，上下内边距的设置能够在内容区的基础上增加行内框的高度。

margin对行内框高度的影响

像padding一样，对普通块元素设置上下margin，会对元素的垂直方向的视觉产生影响（增加块级元素的整体占据空间的高度），而对行内元素设置上下margin则会有不用表现。

应用于行内非替换元素

事实上，当对行内非替换元素设置上下margin时，不会对元素产生任何视觉效果。

• 首先，像padding一下，应用于行内非替换元素时，不会对元素的内容区的高度产生任何影响，进而不会影响到行内框和行框的高度。
• 其次，margin的区域（外边距）为透明色，也不会产生诸如padding值会扩大背景色区域的影响了。
  所以说，当对行内非替换元素设置上下margin时，不会对元素产生任何视觉效果。

应用于行内替换元素

同样的，像padding一样，应用于行内替换元素时，margin会对替换原素的行内框在垂直方向的视觉产生很大影响，我们知道padding值只能为正，不能为负，margin为正时，和设置padding一样，会使替换原宿的上下空出指定的空间，从而增加行内框的高度。不同的是，margin是可以为负的，且当margin为负时，结果则稍显复杂。先举例说明：

文档内容如下：
<p>This is a normal inline element.This is a normal inline element.This is a normal inline element.<img src="./a.PNG"/>This is a cnormal inline element in a span.</span>This is a normal inline element.This is a normal inline element.</p>
基础样式如下

p {width:580px;border:1px solid black;margin:0;padding:0;}
img {height:50px;margin:0 0;}
样式3.1
样式3.1的效果如图：

对图像应用负的上外边距样式

img {height:50px;margin:-30 0 0 0;}
样式3.2
样式3.2的效果图：

可以看到，对上外边距设置为-30px时，第二行整体上移了30px,因为外边距在上下方向设置为负时，相当于负的这部分不计算在元素原本的高度内了，可以看作是负的这部分脱离了整体的文档流，在计算行内框的高度会忽略上放的这30px去计算，行内框的高度减少了30px,鉴于行框此时还是由该图像所撑开的，所以行框的整体高度也可以缩减30px,而图像所在的行内框相对于整行的基线不变，所以整体效果看上去像是整行上移了30px。

对图像应用负的下外边距样式

img {height:50px;margin:0 0 -30 0;}
样式3.3
样式3.3的效果图：

可以看到，对下外边距设置为-30px时，图像下移了-30px，为什么和应用于上外边距效果不一样呢？其实像应用于上外边距一样，这里负的这部分也不计算在元素原本的高度内了，但这里并不是单单将行内框的计算高度和行内框高度减去30px,这里还涉及到基线的对齐，我们知道，默认的基线对齐方式是baseline,而替换元素则是行内框的底框和基线对齐，所以这里图像下方的30px忽略不计，则30px高度处相当于底框了，应该与行框的基线对齐，这样则有了一个元素本身下移的效果。