专栏首页csxiaoyao解决img父元素高度多出3px

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

解决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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不定宽高div水平垂直居中(兼容ie6)

    不定宽高div水平垂直居中解决方法有很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。

    csxiaoyao
  • JavaScript性能提升学习

    不支持defer属性的浏览器:defer、script、load 支持defer属性的浏览器:script、defer、load 3.2 动态添加scr...

    csxiaoyao
  • 系统学习javaweb-07-学习速查案例01

    名称:通讯录系统 目的:常见的javaweb的一些写法总结 说明:数据使用xml,格式见data文件夹下文件,访问login.html,用户名:su...

    csxiaoyao
  • 前端基础-Bootstrap

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • WEB前端响应式布局之BootStarp使用

    1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaSc...

    杨校
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • 【JavaScript小项目】弹出广告

    efonfighting
  • 【JavaScript小项目】轮播图

    efonfighting
  • jQuery动态拼接多张图片并且获取每张图片名称

    1:动态拼接图片,按照顺序渲染图片 2:点击图片,将获取的图片路径进行分割,获取图片名称。

    王小婷
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥

扫码关注云+社区

领取腾讯云代金券