html/前端

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

csxiaoyao · 2月18日 · 2017年 本文669字 · 阅读2分钟18

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

Write By CS逍遥剑仙
我的主页: csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257

1 现象

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

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

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

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

仍不行,排除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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
解决img父元素高度多出3px-禅林阆苑

0 条回应

×