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

28次阅读

共计 599 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完