inline-block元素对齐问题
2019-06-25 本文已影响0人
newway_001
刚刚在网上看到一个有趣的例子：
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;
padding:0;}
div{
line-height: 30px;
background: red;
}
span{
display: inline-block;
width: 50px;
height: 30px;
background: green;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
image.png
出来的效果图是这样的。
理论上来说，父元素行高和子元素高度一样，为啥父元素会比子元素高出一大截？
我们将span元素随便填充222，出来效果如下图：
image.png
可以看到父元素高度降低，子元素高度没有变化。
这是为什么呢？
看了张鑫旭大神的<<css世界>>；
有提到inline-block的对其问题。
不过我觉得他说的规则不太像人话。
我用我自己的理解说一下
inline-block元素中有内联元素且overflow为visible时，这个元素的基线是元素最后一行内联元素的基线；
否则基线就是这个inline-block元素的margin底边缘；
我们结合这个例子看：
