原文链接: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字符,则:

     x-baseline

大家是不是就可以明白原因所在啦!

额~居然还有小伙伴皱眉头,那我再用文字解释下:
现在行高line-height0, 则最后的x-baseline的垂直中线就和上面一列的图片对齐,而基线呢,就在中线下面差不多半个x的高度地方,而这个高度落差就是最后图片和容器的间隙高度值,因为前面的<i class="justify-fix">是个空元素,基线是自身的底部,哈哈,造业啊!

OK,一旦知道了现象的本质,我们就能轻松对症下药了!要么改造占位<i>元素的基线、要么改造“幽灵空白节点”的基线位置、要么使用其他vertical-align对齐方式~

首先,来个最有意思的方法,对吧,改造占位<i>元素的基线。这个很简单,对吧,只要在空的<i>元素里面随便放几个字符就可以了,例如,里面有个x

     xx-baseline

会发现,间隙没有了! 为什么呢?哈哈,因为<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的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  3. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  4. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  5. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  6. CSS 수직 가운데 정렬 (테이블 없이!) Vertical Centering with CSS

    이 방법은 테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록 를 몇 개 세팅한다. (테이블의 vertical-align 속성은 다른 요소들에서는 굉장 ...

  7. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  8. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  9. 在 CSS 中,width 和 height 指的是内容区域的宽度和高度

    增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 改变宽度就可以,去掉

  10. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

随机推荐

  1. 【转】MYSQL入门学习之八:数据库及表的基本操作

    转载地址:http://www.2cto.com/database/201212/175867.html 一.操作数据库  www.2cto.com    1.查看数据库          show ...

  2. Andriod 字符串数组里加入字符串元素

    private String[] t1 = { "姓名", "性别", "年龄", "居住地","邮箱&quo ...

  3. Android GridView 第一个Item 点击没反应

    @Override public View getView(final int position, View convertView, ViewGroup parent) { final ViewHo ...

  4. 关于Animation动画事件的几项测试

    测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...

  5. U3D UGUI学习4 - Text

    1.对应NGUI的四种文字显示模式 Shrink Content 对应NGUI第一种模式     勾选Best Fit 但似乎有一个Bug,文字过多的时候会爆框.解决方法是改变Line Spacing ...

  6. Hadoop Mac OSX 安装笔记

    本次测试安装的机器为Mac Book Pro, 系统为 OS X 10.9.4.Hadoop版本2.4.1. 使用Java版本为Oracle的JDK 1.6.0_65. 1. 下载安装 Hadoop2 ...

  7. 未完成的任务之:下载、安装、体验 Gentoo

    Gentoo,伟大的Gentoo是Linux世界最年轻的发行版本,正因为年轻,所以能吸取在她之前的所有发行版本的优点,这也是Gentoo被称为最完美的Linux发行版本的原因之一. 如果你需要一个桌面 ...

  8. SAP BASIS日常需要做的工作

    SAP Basis的一些日常工作包括用户权限管理.集团管理.数据库管理.后台作业.打印管理.系统监控.传输管理等. a. 用户权限管理: SU01—创建,修改,显示用户信息 SU10—批量修改用户 P ...

  9. C#中Struct与Class的区别

    class和struct最本质的区别是class是引用类型,而struct是值类型,它们在内存中的分配情况有所区别. 什么是class? class(类)是面向对象编程的基本概念,是一种自定义数据结构 ...

  10. Python 正则表达式指南 zz

    zz http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一 ...