Html内联元素采坑——元素底部多出空白区域

Html内联元素采坑——元素底部多出空白区域

html的元素有两类：

1. 块级元素，如：div
2. 内联元素，如：img、span、inline-block类型等

坑——请看下面代码和图片

从上面的代码和图片可以看到，el-color-picker的div的高度为30px;而其父div的高度为34px;可见，其父div多出了4px;那么这多出的4px高度从哪里来的，

下面例子也是：

问题：为什么块元素下含有内联元素时，块元素会有多余的高度？

上面的两个例子的这种情况，是由于内联元素的vertical-align和line-height属性搞的
大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有高度、没有实体的空白节点，这空白节点会影响块元素的高度

上面两例子怎么解决？

1. 让vertical-align失效(推荐)
块元素会使vertical-align失效，这时可以把内联元素转为块元素，如，给el-color-picker的div或者img设置：display:block

2. 使用其他vertical-align值
告别baseline（基线）默认基线, 取用其他属性值，比方说bottom/middle/top都是可以的。

参考文章：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/