[css] vertical-align和line-height
原文链接: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的更多相关文章
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- CSS 수직 가운데 정렬 (테이블 없이!) Vertical Centering with CSS
이 방법은 테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록 를 몇 개 세팅한다. (테이블의 vertical-align 속성은 다른 요소들에서는 굉장 ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 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
- 在 CSS 中,width 和 height 指的是内容区域的宽度和高度
增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 改变宽度就可以,去掉
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
随机推荐
- 【转】MYSQL入门学习之八:数据库及表的基本操作
转载地址:http://www.2cto.com/database/201212/175867.html 一.操作数据库 www.2cto.com 1.查看数据库 show ...
- Andriod 字符串数组里加入字符串元素
private String[] t1 = { "姓名", "性别", "年龄", "居住地","邮箱&quo ...
- Android GridView 第一个Item 点击没反应
@Override public View getView(final int position, View convertView, ViewGroup parent) { final ViewHo ...
- 关于Animation动画事件的几项测试
测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...
- U3D UGUI学习4 - Text
1.对应NGUI的四种文字显示模式 Shrink Content 对应NGUI第一种模式 勾选Best Fit 但似乎有一个Bug,文字过多的时候会爆框.解决方法是改变Line Spacing ...
- Hadoop Mac OSX 安装笔记
本次测试安装的机器为Mac Book Pro, 系统为 OS X 10.9.4.Hadoop版本2.4.1. 使用Java版本为Oracle的JDK 1.6.0_65. 1. 下载安装 Hadoop2 ...
- 未完成的任务之:下载、安装、体验 Gentoo
Gentoo,伟大的Gentoo是Linux世界最年轻的发行版本,正因为年轻,所以能吸取在她之前的所有发行版本的优点,这也是Gentoo被称为最完美的Linux发行版本的原因之一. 如果你需要一个桌面 ...
- SAP BASIS日常需要做的工作
SAP Basis的一些日常工作包括用户权限管理.集团管理.数据库管理.后台作业.打印管理.系统监控.传输管理等. a. 用户权限管理: SU01—创建,修改,显示用户信息 SU10—批量修改用户 P ...
- C#中Struct与Class的区别
class和struct最本质的区别是class是引用类型,而struct是值类型,它们在内存中的分配情况有所区别. 什么是class? class(类)是面向对象编程的基本概念,是一种自定义数据结构 ...
- Python 正则表达式指南 zz
zz http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一 ...