摘要：左起第一个矩形内部有文字，属于内联元素，那么第一个的基线为内部的基线，第二个的内部无内联元素，那么它的基线就是的底端，第三个内部有内联元素，但是他的属性为，不是，所以它的基线还是的底端。
看似三个最常见的概念背后却隐藏了很深的很深“水”
那有多深呢，先来看下面的代码
x
x x xjq
好，同学们把这四段代码放到编辑器里面然后打开浏览器，如果对于你眼前的画面没有感到疑惑，那么其实你就无需向下看了
On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.).
翻译成国语：
在一个由行内元素组成的块级元素中，line-height指定了这个元素中的所有line box的最小高度。这个最小高度包括在baseline上面的最小高度和baseline下面的最小深度，就好像每个line box是由一个0宽度的，有着元素的font和line-height属性的行内框开始的，我们称这个虚拟的盒子为strut
关于baseline和line box的概念请参考张鑫旭大大的文章：
http://www.zhangxinxu.com/wor...
看着很乱是吧，上图来看：
分析原因这是前两段代码的示意图，对比两张图发现span没有宽高的情况下，baseline上下分别有隐形高度；设置宽高之后，下面的strut仍然存在，再来看第三段代码的示意图
图中蓝色区域为行内框的高度，红线即字母x的baseline,strut的高度正好是红线到底边框的高度，也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的文档，默认值果然是baseline，印证了这一说法。
看最后一段代码示意图：
wtf，这又是几个意思？？baseline怎么又和底边框接上了？？
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
再来翻译成国语：
对于一个 inline-block 元素，如果它内部没有内联元素，或者它的overflow属性不是visible，那么它的baseline就是元素margin的底端。否则，就是它内部最后一个元素的基线。
好了，图中三个框可以很好地理解这段话：
最前面的x是用来确定这个代码中最外层的div的基线。左起第一个矩形内部有文字，属于内联元素，那么第一个inline-block的基线为内部x的基线，第二个inline-block的内部无内联元素，那么它的基线就是margin的底端，第三个inline-block内部有内联元素，但是他的overflow属性为hidden，不是visible，所以它的基线还是margin的底端。
解决方案font-size: 0 或者 line-height: 0
vertical-align !== baseline
方法1和方法2是两个不同的实现思路，方法1是让strut那个东西消失；方法2说起来就有点多了，简单理解就是inline-block垂直方向设置非baseline，从而让strut没有顶到底部，也就不会有空白出现了
感觉自己写的很乱，有耐心看完的同学真是谢谢你们了~~
还是张鑫旭大大写得好写的全
http://www.zhangxinxu.com/wor...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111619.html
摘要：左起第一个矩形内部有文字，属于内联元素，那么第一个的基线为内部的基线，第二个的内部无内联元素，那么它的基线就是的底端，第三个内部有内联元素，但是他的属性为，不是，所以它的基线还是的底端。 看似三个最常见的概念背后却隐藏了很深的很深水 那有多深呢，先来看下面的代码 引出问题 .inline-block { display: inline-block; } ...
摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值 线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值 百分...
摘要：从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素，它指定元素行盒的最小高度。对于非替代的元素，它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。 从一个内联元素布局引发对line-height的探讨 一、前言 line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的...
阅读 3248·2021-11-11 11:00
阅读 2568·2019-08-29 11:23
阅读 1446·2019-08-29 10:58
阅读 2327·2019-08-29 10:58
阅读 2955·2019-08-23 18:26
阅读 2509·2019-08-23 18:18
阅读 2043·2019-08-23 16:53
阅读 3416·2019-08-23 13:13
