标签:
原文链接:http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
一、inline-block和baseline
一个inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。
.dib-baseline { display: inline-block; width: 150px; height: 150px; border: 1px solid #cad5eb; background-color: #f0f3f9; }
<span class="dib-baseline"></span> <span class="dib-baseline">x-baseline</span>
结果,科科:
x-baseline
会发现,明明尺寸、display水平都是一样的,结果呢,两个却不在一个水平线上对齐,为什么呢?哈哈,上面的规范已经说明了一切。第一个框框里面没有内联元素,因此,基线就是容器的margin下边缘,也就是下边框下面的位置;而第二个框框里面有字符,纯正的内联元素,因此,第二个框框就是这些字符的基线,也就是字母x的下边缘了。于是,我们就看到了框框1下边缘和框框2里面字符x
底边对齐的好戏。框框2有个小彩蛋,点击可以toggle其innerHTML
,会发现,如果框框2里面没文字,就和框框1举案齐眉了。
下面我们要做一件很有必要的事情,用来帮助我们理解上面复杂例子在line-height
值为0
后的表现,什么事情呢?哈,同境界模拟,我们也设置框框2的line-height
值为0
,于是,就会是下面这样的表现:
x-baseline
知道框框2为何又下沉了一点吗?
因为字符实际占据的高度是由行高决定的,当行高变成0的时候,字符占据的高度也是0
,此时,高度的起始位置就变成了字符content area的垂直中心位置,于是,文字就一半落在看看2的外面了。
由于文字字符上移了,自然基线位置(字母x
的底边缘)也往上移动了,于是,两个框框的垂直落差就更大了。
OK,明白了上面的简单例子,也就能明白上面的复杂例子。紧接着,如果我们在最后一个占位的<i>
元素后面新增同样的x-baseline
字符,则:
大家是不是就可以明白原因所在啦!
额~居然还有小伙伴皱眉头,那我再用文字解释下:
现在行高line-height
是0
, 则最后的x-baseline
的垂直中线就和上面一列的图片对齐,而基线呢,就在中线下面差不多半个x的高度地方,而这个高度落差就是最后图片和容器的间隙高度值,因为前面的<i class="justify-fix">
是个空元素,基线是自身的底部,哈哈,造业啊!
OK,一旦知道了现象的本质,我们就能轻松对症下药了!要么改造占位<i>
元素的基线、要么改造“幽灵空白节点”的基线位置、要么使用其他vertical-align
对齐方式~
首先,来个最有意思的方法,对吧,改造占位<i>
元素的基线。这个很简单,对吧,只要在空的<i>
元素里面随便放几个字符就可以了,例如,里面有个x
:
会发现,间隙没有了! 为什么呢?哈哈,因为<i>
元素的基线和“幽灵空白节点”的基线位置现在一致了,没有了错位,自然就不会有间隙啦!
改造“幽灵空白节点”的基线位置,哈哈,使用font-size
,字体足够小时,基线和中线会重合在一起,什么时候字体足够小呢,就是0
. 于是,CSS代码(line-height
如果是相对值,line-height:0
也可以省掉):
div { font-size: 0; }
使用其他vertical-align
对齐方式,就是让两端对齐的列表元素vertical-align:top/bottom/...
之类。
div { line-height: 0; } .justify-fix { display: inline-block; width: 128px; vertical-align: top; }
最后的效果是:
恩恩,各种方法都完美解决了垂直间隙的问题,来,各个大大的赞!
[css] vertical-align和line-height
标签:
原文地址:http://www.cnblogs.com/wxiaona/p/5748897.html