解决img标签上下出现间隙的方法


Posted in HTML / CSS onDecember 14, 2016

我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,我们一般会去使用一个列表来对我们的img 进行承装。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

    <ul>
        <li>
            <img src="lipeng.png">
        </li>
    </ul>
</body>
</html>

但是这个时候我们发现了一个问题,为什么我的图片下面多出来一条线呀?

解决img标签上下出现间隙的方法

这是怎么回事呀?

我不是已经把 img 的外边距和内边距什么的全部清空了么?

实际上,这其实是inline元素搞的鬼。

任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。----《CSS权威指南》

什么意思?

意思就是,其实如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙,也就是我们上文出现的问题了。

解决img标签上下出现间隙的方法

那我们既然知道了这个问题出现的原因,那么解决起来也就简单多啦。

1.第一种解决方案

既然是 inline 元素才会发生这个问题,那我们自然可以简单粗暴的解决这个问题,那就是给我们的元素“变个性”,让它从 inline 变为 block 不就可以了么?

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            display: block;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

2.第二种解决方案

这也太粗暴了,变了性别,回头还怎么愉快的玩耍呀,所以我们要尝试曲线救活,我们可以去修改一下它的垂直对齐方式呀,这样是不是就可以了呢? 

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            vertical-align: middle;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

可以看出,这样也可以实现想要的效果。

原因在于,vertical-align 的默认属性就是 baseline ,我们只要设置了跟 baseline 不一样的属性,都可以避免这个问题。

解决img标签上下出现间隙的方法

3.第三种解决方案

但是修改了对齐方式,这样也有可能会造成问题呀,我们可不可以去让这个元素飘起来呢?既然你已经不在当前文档流中了,你布局的时候自然也就不会参照这个文字去进行对齐了呀。

我们可以去使用浮动。

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            float: left;
        }
        ul li {
            overflow: hidden;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

这样也可以解决这个问题,但是请注意,“浮动虽好,可不要贪杯呦”。

你一定要能够正确的解决浮动所造成的影响,而且假如你原本就打算去做文字环绕效果,那么使用浮动一定是你的不二选择。

4.第四种解决方案

假如上面几种方案全都不能解决你的问题,那么只有祭出我的大杀器了。

你可以给你的父元素把文字大小设成0。

<style type="text/css">
        img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;
        }
        ul li {
            font-size: 0px;
        }
        ul{
            border: 1px solid blue;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

既然你是根据 文字的基线去对齐,我直接把文字给你设没了,这样你就没法定位了吧,但是这种做法,只推荐在你已经“急头白脸死活弄不出来”的时候才去使用的。

总结

好了,以上就是对这个问题的四种解决方案,希望看到此文的小伙伴以后都能跳出这个坑啦。如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 #HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 #HTML / CSS
详解HTML5表单新增属性
Dec 21 #HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 #HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 #HTML / CSS
HTML5应用之文件上传
Dec 30 #HTML / CSS
详解HTML5中的标签
Jun 19 #HTML / CSS
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php除数取整示例
2014/04/24 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python线程、进程和协程详解
2016/07/19 Python
Python中Threading用法详解
2017/12/27 Python
django 多数据库配置教程
2018/05/30 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
21岁生日感言
2014/02/27 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
2015年个人思想总结
2015/03/09 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis