项目场景:
display:block 和 line-height 混用 的时候出错
问题描述:
看图识话
<!-- display:block 和 line-height 混用 的时候出错 -->
<!-- 因为把一个行内元素 设置为 块元素后,再去设置它的 line-height 其实 差不多 就相当于 是设置 了height。而且 行高 是可以继承的 -->
<div class="bb">
<a class="aa" href="#">防静电咖啡机卡是否</a>
</div>
.bb{
width: 200px;
height: 200px;
line-height: 200px;
margin: 20px auto;
background-color: #bfa;
}
.aa{
display: block;
border: 1px red solid;
/* line-height: 1; */
}
原因分析:
因为把一个行内元素 设置为 块元素后,再去设置它的 line-height 其实 差不多 就相当于 是设置 了height。而且 行高 是可以继承的
解决方案:
可以对行高进行 重置。