添加line-height之后为什么父元素会出现一个滚动条?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

添加line-height之后为什么父元素会出现一个滚动条?

杨冬芳 2016-06-12 16:00:03 1029

在写下图这个页面。为了让右上角的红色数字 3.2 (字号55px) 与左边那个banner图下沿对齐,我先给数字所在的

,也就是代码中的 .about_footer_1 加了个 line-height: 38px;。(否则数字 3.2 下边会有一点空白)
奇怪的是加了之后,.about 出现了一个滚动条…… 我已经给 .about 设置了 overflow:auto 了,这个滚动条是哪来的呢?
代码
screenshot
125

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:34:24

    不知道题主是不是改过 demo,我在里面看到了横向和纵向的滚动条。
    横向的是因为 700 那个数字的宽度太大导致的。
    纵向的原因并不复杂,但是看起来挺绕。首先 overflow:auto 并不是不出现滚动条的意思,你 demo 中的这个应该是用来清浮动让父元素高度不塌陷的。那个 3.2 的确是 float 的,父元素也没塌陷,问题在于你设置的 line-height 是不足够显示下那么大的 font-size 的,意味着内容的高度是超过父元素高度的,加之又是 overflow:auto,于是乎出现了纵向滚动条。可以尝试把 font-size 缩小或者 line-height 增大,即可看见滚动条消失。
    不过,demo 里的实现方式其实写的不是特别好 =.=

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章