开发者社区 问答 正文

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

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

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

展开
收起
杨冬芳 2016-06-12 16:00:03 2675 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • IT从业

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

    2019-07-17 19:34:24 举报
    赞同 评论

    评论

    全部评论 (0)

    登录后可评论
问答地址:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等