好了同学们把这四段代码放到编辑器中打开浏览器，如果你对眼前的图片不迷茫，那你就不用往下看了。在内容由行内级元素组成的块容器元素上，'line-height'指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就好像每个行框都以具有元素的字体和行高属性的零宽度内联框开始。我们称那个假想的盒子为“支柱”。（这个名字的灵感来自于TeX。）。翻译成普通话：在一个由行内元素组成的块级元素中，line-height指定了这个元素中所有行框的最小高度。这个最小高度包含在Theminimumheightabovethebaseline和theminimumdepthbelowthebaseline中，就好像每个linebox都是由一个0-widthinlinebox开始的，带有元素的font和line-height属性，我们称这个为virtualboxstrutaboutbaselinelinebox和linebox的概念可以参考张新旭的文章：http://www.zhangxinxu.com/wor...看起来很乱是吧？看上图：原因分析。这是前两个代码的示意图，用于对比。两张图发现当span没有宽高时，baseline的上下分别有不可见的高度；设置好宽高后，下面的strut依然存在，再看第三段代码的示意图。蓝色区域是inlinebox的高度，红线也就是字母x的baseline和strut的高度正好是红线bottomborder的高度，也就是说默认的vertical对齐是基线；看了一眼关于vertical-align的MDN文档，默认值确实是baseline，印证了这个说法。看最后一个代码图：wtf，这些是什么意思？？为什么基线再次连接到底部边框？？“inline-block”的基线是它在正常流中最后一个行框的基线，除非它没有流入行框或者它的“overflow”属性的计算值不是“visible”，在在这种情况下，基线是底边距边缘。再翻译成普通话：对于一个inline-block元素，如果它里面没有inline元素，或者它的overflow属性不可见，那么它的基线就是元素margin的底部。否则，它是其中最后一个元素的基线。嗯，图中的三个框可以很好的理解这段话：前面的x用于确定这段代码中最外层div的基线。左起第一个矩形里面有文字，属于行内元素，那么第一个inline-block的基线就是内部x的基线，第二个inline-block里面没有行内元素，那么它的baseline是margin底部，第三个inline-block里面有行内元素，但是它的overflow属性是隐藏的，不可见，所以它的baseline还是margin的底部。解决方案font-size:0orline-height:0vertical-align!==baseline方法一和方法二是两种不同的实现思路，方法一是让strut消失；方法2说的有点多，简单的理解就是把inline-block的垂直方向设置为非基线，这样strut就不会到底，不会有空白。我觉得我的文笔很乱。感谢耐心看完的同学们~~还是张新旭写的好，全http://www.zhangxinxu.com/wor...