乐趣区

关于css:lineheight的其中之一作用

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 外面了

退出移动版