消除行内元素底部留白
行内盒模型
消除行内元素底部间隙：
原理：
middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.div1{
display: inline-block;
background: rebeccapurple;
}
.div2{
display: inline-block;
background: red;
width: 150px;
height: 150px;
}
</style>
<body>
<div class="div1" id="btn">
<div class="div2"></div>
</div>
</body>
解决方法：
- .div1{line-height: 0; }
- .div1{font-size: 0;}
- .div2{ vertical-align: bottom;}
- .div2{ display:block}