想要画下图这个轮播图按钮来着，一个<div>，中间三个<span>搞定。
设置<span>为inline-block，然后设置宽高，margin-top和margin-bottom一样的话，<span>就会在<div>里垂直居中了对吧，然而并没有。<div>的高度总是比算出来的高了那么点，使得<span>并没有很完美垂直居中，怪怪的。
恩，到处改改改试试试，然后发现是line-height搞的鬼。
举个简单的栗子哈，我有一个<div>，如果line-height不是0，比如line-height是30px，里面只有一个空的<span>,我设置<span>为inline-block，然后设置宽度50px，高度和line-height一样，也是30px，那么，<div>的高度是不是也是30px呢？是呢？不是呢？
HTML代码：
<body>
<div>
<span></span>
</div>
</body>CSS代码：
div{
line-height: 30px;
background: red;
}
span{
display: inline-block;
width: 50px;
height: 30px;
background: green;
}结果是<div>比<span>要高。
恩哼，好奇怪，我尝试在<span>里输入点啥，结果就正常了。
所以，为了不显示文本，我可以在<span>中插入空格符号 ，这样不影响显示。
或者，把<div>的line-height设为0，都可以使得<div>高度就是<span>高度。
然后我再给<span>加上margin: 10px 0;，好了，<span>在<div>中完美垂直居中了！
如果你在写CSS过程中发现元素高度总是比计算的大点，看看是不是line-height在捣乱哦。
再举个栗子，比如在<a>里面插入一个<img>，什么样式都不设置，<a>的高度会是多少呢？是图片的高度吗？还是浏览器默认行高呢？（因为<a>是行内元素）
如果我设置<a>为display: block;，那么<a>的高度就是<img>高度吗？还是不是呢？
自己动手试试咯。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。