html 构造:
<div class="money-options active">
<p class="txt"> 月会员 </p>
<p class="money">¥XX</p>
<p class="times">1 个月 </p>
</div>
css 构造:
.money-options {
display: inline-block;
width: 106px;
height: 108px;
/*line-height: 1;*/ /* 没有 line-height 的时候 */
margin-right: 10px;
border: 1px solid #D7D7D7;
border-radius: 8px;
text-align: center;
}
.money-options .txt {
padding: 18.5px 0 0 0;
color: #656565;
font-size: 13px;
}
.money-options .money {
padding: 15.5px 0 18px 0;
color: #F7B529;
font-size: 20px;
}
.money-options .times {
margin: 0 0 12.5px 0;
color: #999999;
font-size: 11px;
}
解释:
如果在一个 div 设置的高度而没有设置 line-height,那么这个 div 外面的内容就会撑进来,加上 line-height:1 后,那么外面的 padding 就不会乱撑开,就会放在 div 外面了