# 多出的滚动条
{% embed url="" %}
{% embed url="" %}
今天这个 bug 好玩哈
这块总是有一个滚动条
而且啊
它跟里边这个元素的数量没有关系
比如说我把它只保留一个
大家看它还是有这个滚动条
我们来检查一下它这个元素
大家看最外层现在是40像素高度
然后里层有个 spa 标签现在是19.
然后呢这还有个 div
div 是40 可能很多同学说
有可能就是这个 div 导致的
我们把这个 div 去掉
大家看他还是有这个滚动条
那到底是为什么呢
我们这样我们把里边这个四瓣标签啊
先加一个黑色的背景
然后因为他现在默认是 display: inline
我们把它改成 display: inline-block
好然后大家注意我把它放大
大家仔细看上面是不是错开了一点点
而且呢下边超出了一点点
那更好玩的是什么呢
我里边这个字体
如果变小的话呢大概错开的就多了
下边超出的也多了
甚至呢我们把这块
把外边的这个
的字体改成
大家看它超出的就更多了
那到底为什么会这样呢
这个我之前也讲过
原因就是
他这个（vertical-align）base-line对齐的问题
比如我在这写个
大家一下就看出来了
那哪条线是base-line呢
就是这条线
他默认是base-line（基线）对齐的
所以呢
左边这个 span 标签
为了保持让里边的文字和
整体保持base-line（基线对齐）
他就会往下错位
所以要解决这个问题呢
第一种方法就是把两个字体
调成一样的大小（不演示了）
第二个方法就是我们在这加一个
vertical-align 等于 top
这样就解决了
我们把这个代码头撤销一下试一下
好
然后注意看现在是有滚动条的对吧
然后我们在这加一个
vertical-align: top
好大家看，这回没有滚动条了
完美解决