首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决img父元素高度多出3px

解决img父元素高度多出3px

作者头像
csxiaoyao
发布2019-02-15 16:38:17
1.3K0
发布2019-02-15 16:38:17
举报
文章被收录于专栏:csxiaoyaocsxiaoyao

解决img父元素高度多出3px

1 现象

  当div / a……中包含img时,父元素的高度比img图片的高度多出3px

<div>
    <img src=" ">
<div>

  结果运行之后发现,不管是在移动端还是pc端,都会出现这种问题。刚开始以为是父元素初始化了marginpadding的原因,排查css无果,又怀疑是html空格的原因,把html改成

<div><img src=" "/></div>

仍不行,排除html空格的问题

2 原因

  通过google了解到原因,img是一种类似text的标签元素,在结束的时候,会在末尾加上一个空白符(匿名文本),这个文本外有一个匿名行级盒子,它默认的vertical-alignbaseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个匿名盒子就会下沉,往下撑开一些距离,所以把a撑高了

3 解决方案

(1)消除掉匿名盒子的高度,给a设置line-height:0font-size:0 (2)给两者vertical-align:top,让其top对齐,而不是baseline对齐 (3)【推荐】:给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年05月09日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决img父元素高度多出3px
    • 1 现象
      • 2 原因
        • 3 解决方案
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档