行内非替换元素的实际高度

晚上一个小师妹，问我为什么会出现下面这样的情况：

这个问题之前自己还从没遇到过。

1.刚看到这个问题时，心里还不确定是因为什么原因引起的，觉得可能和span的padding有关系，就先重置了*{margin：0px；}发现，红色背景元素不再高出。但是当将灰色背景的div向右下移动一定距离时，发现问题还是存在的。

2.接着，怀疑是与行内元素的盒模型有关。但不能确定是与垂直方向的padding相关，还是和line-height相关。还在猜测会不会在某种情况下行内元素撑破了其父元素（block）的盒模型。

在先后更改了span的padding-top,padding-bottom，line-height后发现，影响这样情况的是line-height。当line-height=它内容的值+padding-top+padding-bottom的值时，它表现的和预期一样。

3.为什么会这样呢？自己又查了一些资料。

最后得出的结论是，非替换的行内元素，其真正高度只有其内容的line-height有关。与垂直方向的padding，margin，border都无关。

1、元素可以设置内边距，外边距，宽度，高度以及边框的宽度，而行内非替换元素在显示时还是有稍微差别，行内非替换元素的上下内边距、上下边框宽度，上下外边距并不会影响元素的高度，即对相对其它元素的距离不会以此改变，如a元素。

2、当你将块元素与行内非替换元素放一起时，譬如行内非替换元素上面，块元素下面，假设行内非替换元素有5px的边框，你会发现快元素与行内非替换元素的之间的距离并不是相对行内非替换元素的边框而言，好像边框不存在一样。出现该情况是因为行内非替换元素由line-height决定，默认line-height为其内容的高度。