千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业
当前位置:首页  >  关于学院  >  技术干货  > 前端问题之:img标签下方出现空隙的问题解决方案

前端问题之:img标签下方出现空隙的问题解决方案

来源:千锋教育
发布人:小千
时间: 2020-12-09 09:07:00 1607476020

      很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图

1

代码如下:

2

3

为什么会出现这种情况呢?

      因为img是一种类似text的标签元素,在结束的时候,会在末尾加上一个空白符(匿名文本),导致下方会多出来 3px 间距,其实我们在img右侧添加一个span包裹住文本,现象会更明显。

下面我们来解决这个问题

第一种方法:

  • 给div设置和img一样的高度;
  • 缺点:该方法不够灵活,一旦img尺寸改变,我们要重新设置div的高度

第二种方法:

  • 给img设置vertical-align为除baseline以外的值,常用

第三种方法:

  • 给img添加display:block;
  • 这个方法是我们比较常用,但需要注意,img一旦设置为块,text-align:center;就不再生效,图片的水平居中应使用margin:auto;

第四种方法:

  • 给img设置浮动,设置浮动会让img脱离文档流
  • 缺点:父元素高度不会被img自动撑开

第五种方法:

  • 给div设置font-size:0;
  • 缺点:该方法会使div中的文字消失

      上述五种方式同学们根据实际情况选择使用即可,最后效果如图所示

 

2

      欢迎小伙伴们添加我们的前端交流qq群:791201477  或者   857920838,添加群找群管理要前端学习资料和视频即可,欢迎大家关注和转发。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区