vertical-align属性的baseline值的含义

原创 乘风逐月 随笔 CSS知识记录 206阅读 2017-12-27 17:35:05 举报

今天看到一篇文章,我脑中飘来飘去的css魔幻属性,突然发现自己好像不是很理解baseline值是什么含义,因此记录一下。
vertical-align的值有哪些?w3school给出了这些值:

vertical-align属性的baseline值的含义
vertical-align属性是对行元素和行内块元素才有效的属性,默认值是baseline,所以有图片出现的时候就经常需要修改默认值。要理解baseline的含义先看一张图,图是从那篇文章获取的。

vertical-align属性的baseline值的含义
baseline:默认值,元素放置在父元素的基线上。
父元素的基线是指什么呢?父元素的基线是指父元素内最后一个行内元素的基线。最后一个元素有文本,就是该元素最后一行文本的基线,如果该元素没有文本就是该元素的margin-bottom的下边线。而文本的基线是指英文小写字母中占四线三格中格的字母如a,b,c这类字母底部的那条线。
如下图所示:

vertical-align属性的baseline值的含义
上图代码:
html 代码

上图第一行三个li方块都是宽高一样,display为inline-block,但是它们并没有一行整齐的对齐,就是因为它们都是有文本的,所以都是文本基线对齐的。都去掉第三个li的文本,前两个li方块以第三个li方块的margin-bottom的底线对齐。
而上图的第二行,图片没有撑满父元素的灰色区域,那点空隙就是行高line-height与父元素基线即小写英文的baseline之间的距离。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复